Jquery 实现图片延迟加载

た入场券 2022-09-20 08:31 1074阅读 0赞

网上的那个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: