懒加载的原理

懒加载原理的实现

实现原理：

1、对于img标签，只要将图片地址赋给src属性，浏览器解析的时候就会自动去请求图片地址所指向的资源，浏览器的这个机制我们是没办法改变的，那么我们只能在src属性上做文章，在刚开始的时候我们把图片地址赋给img标签一个自定义属性例如data-src，src属性留空。

2、设置一个定时器定时检测出现在视图内的图片，并将其data-src属性的值赋值给src属性。（其实这个地方也可以通过事件来检测）

原生js的实现：

varimgs = document.getElementsByTagName("img");

functionlazyload(){

    varscrollTop = window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop;

    varviewportSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

    for(vari=0,len=imgs.length;i0){

            imgs[i].src = imgs[i].getAttribute("loadpic");

        }

    }

}

setInterval(lazyload,1000);

jQuery的实现：

$(function(){

    varviewportSize = $(window).height();

    varlazyload = function(){

        varscrollTop = $(window).scrollTop();

        $("img").each(function(){

            var_this = $(this);

            varx = viewportSize + scrollTop + _this.position().top;

            if(x>0){

                _this.attr("src",_this.attr("loadpic"));

            }

        })

    }

    setInterval(lazyload,1000);

})