图片延时加载

//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)
　　});
})

 

转载于:https://www.cnblogs.com/zjz666/p/11201175.html