图片延时加载

Posted 2022-04-21 zjz666

//js
<script>
    var imgs = document.getElementsByTagName("img");
    function lazyload()
        var scrollTop = window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop;

        var viewportSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

        for(var i=0,len=imgs.length;i<len;i++) 
            var x = scrollTop + viewportSize - imgs[i].offsetTop; 
            if(x>0)
                imgs[i].src = imgs[i].getAttribute("data-src");
            
        
    
    setInterval(lazyload,1000);
</script>

//jquery
<script type="text/javascript">
    $(function()
        var viewportSize = $(window).height();
        var lazyload = function()
            var scrollTop = $(window).scrollTop();
            $("img").each(function()
                var _this = $(this);
                var x = viewportSize + scrollTop - _this.offset().top;
                if(x>0)
                    _this.attr("src",_this.attr("data-src"));
                
            )
        
        setInterval(lazyload,100);
    )
</script>


//改进

$(function()
　　function aa()
　　　　var winH = $(window).height();
　　　　var scrollTop = $(window).scrollTop();
　　　　$("img").each(function()
　　　　　　var imgTop = $(this).offset().top;
　　　　　　if(imgTop<winH+scrollTop)
　　　　　　　　$(this).attr("src",$(this).attr("data-src"));
　　　　　　
　　　　)
　　
　　aa();
　　$(window).scroll(function()
　　　　setTimeout( aa,1000)
　　);
)