Jquery 实现 图片延迟加载

网上的那个Jquery的插件不好用,你试过就知道.

无奈,自己写了一段代码

$(function(){
        var CPos=function(x, y)  {     this.x = x;       this.y = y;    }
        var GetObjPos =function (ATarget){
            var target = ATarget;
            var pos = new CPos(target.offsetLeft, target.offsetTop);
               
            var target = target.offsetParent;
            while (target){
                pos.x += target.offsetLeft;
                pos.y += target.offsetTop;
                   
                target = target.offsetParent;
             }
             return pos;
        }
            
        var reload=function(){
            $('img.lazy').each(function(){                
                var o=$(this);
                if(!o.attr('data-original')) return true;
                if(o.attr('src')==o.attr('data-original')) return true;

                var top=GetObjPos(this)['y'];
                if(top==0)return true;
                
                var t=(document.documentElement && document.documentElement.scrollTop)?document.documentElement.scrollTop:document.body.scrollTop;
                
                if(top < t + document.documentElement.clientHeight + 400 && top+400>t)    {
                    var org=o.attr('data-original');
                    o.attr('src',org);
                };
                return true;
            })
        }
        $(window).resize(reload)
        setInterval(reload,1000)        
    })

以上在窗口尺寸变化时调用, 每一秒调用.   (如果放在滚动事件中,导致卡屏)

以上中的400,是预加载高度,可以调节

图片 HTML:

<img class="lazy" src="默认加载中的图片地址"
    data-original="真实图片地址" alt="{$title}" width="210px" height="165px"/>