/*
 * 作者:zen  (346816084@qq.com)
 * 图片延迟加载脚本
 * 适用于图片较多的页面.可加快页面的加载速度,同时节省一部分流量
 * 
 * 使用方法:
 * 该脚本依赖于jQuery1.3+以上
 * 延迟加载的图片的src统一为一个1*1像素的透明图片.同时将宽高预设好.将图片的真实地址放在自定义属性"rsrc"中.
 * 
 * 例: <img class="lazy-image" src="空白图片路径" rsrc="真实图片路径" height="300px" width="500px" alt="" />
 *
 * 在页面的document加载完成后,加载该脚本,同时用下列的命令开始运行脚本
 *       
 *  例:var lazyImage=$(".lazy-image").lazyImage();
 *  
 *  手动执行图片加载:
 *  lazeImage.reloadImage();
 */
jQuery.fn.extend({
    lazyImage:function(){
        var _self=this,
            scrollTop,
            interval,
            lazy=400;
        
        //判断页面是否发生了滚动
        var scrollWindow=function(){
            var ran=getViewRang();
            if(ran.y!=scrollTop){
                loopLoad(ran);
            }
            //所有图片加载完成,停止事件监听
            if(_self.length>0){
                interval=setTimeout(arguments.callee,lazy);
            }
        };
        
        //循环队列加载图片
        var loopLoad=function(){
            var temp=[],
                ran=getViewRang();
            _self.each(function(i,n){
                if(isOver(ran,$(this))){
                    temp.push(this);
                    loadImage($(this));
                }
            });
            scrollTop=ran.y;
            //将已读取对象清除出队列
            _self=_self.not(temp);
        }
        
        //获取视口范围
        var getViewRang=function(){
            return {
                y:$(document).scrollTop(),
                height:$(window).height()
            }
        };
        //是否在视口范围内
        var isOver=function(ran,obj){
            var offset=obj.offset(),
                //objHeight=obj.height()?obj.height():obj.attr("height"),  //隐藏元素需要height属性的支持,否则不能加载
                objHeight=obj.height(),
                overX=overY=false;
            if(offset.top<(ran.y+ran.height)&&(offset.top+objHeight)>ran.y){
                overY=true;
            }
            return overY;
        };
        //读取真正的图片
        var loadImage=function(obj){
            obj.hide();
            obj.attr("src",obj.attr("rsrc"));
            obj.fadeIn("slow");
            return obj;
        }
        
        scrollWindow();
        return {
            reloadImage:function(){
                loopLoad();
            }
        }
    }
});