懒加载原理的实现

实现原理：

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

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

原生js的实现：

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("loadpic");

        }

    }

}

setInterval(lazyload,1000);

 

jQuery的实现：

$(function(){

    var viewportSize = $(window).height();

    var lazyload = function(){

        var scrollTop = $(window).scrollTop();

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

            var _this = $(this);

            var x = viewportSize + scrollTop + _this.position().top;

            if(x>0){

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

            }

        })

    }

    setInterval(lazyload,1000);

})

------------------------------------------------------------------------------------------------------------------------------------我是分割线---------------------------------------------------------------------------------------------------------------------------------------------

图片延迟加载主要是用来解决一个页面中图片太多，导致打开页面的时候一次性加载太多图片导致打开速度慢的问题。现在在很多网站上都用得很多，比如说微店，淘宝等一些图片量较大的网站，采取懒加载也是利于用户体验。

 

原理即是网页代码中有img标签，但是没有src属性，只是把src原本应该放的图片链接放到另外一个属性值去，比如说data-src，这样浏览器就不能把图片渲染出来。但是可以通过js获取这个图片链接，通过适时把获取到的图片链接赋值给src属性上，这样图片就能在适时的时候渲染出来，而不是一次性全部加载，而是通过鼠标滚动，一个一个加载进来。

基于jQuery的代码（使用前务必引入jQuery）：

• <img class="lazy" alt="" data-src="http://wd.geilicdn.com/vshop.jpg" />
• <script>
• $(window).scroll(function() {//窗口滚动的时候（鼠标滚轮的时候。。）
• $('img').each(function() {//把以下的方法作用到每一个img标签，可自行加限定条件
• var $imgSrc = $(this).attr('data-src');//获取每张图片对应地址
• var $imgTop = $(this).offset().top;//获取每张图片对应距离document顶部的高度
• var scrollT = $(window).scrollTop();//获取滚轮滚动的距离
• var halfDoc = $(window).height();//获取浏览器窗口可视高度
• var ifElse = (scrollT+halfDoc)>=$imgTop;//如果滚动距离加上窗口可视高度大于该图片距离document顶部的高度
• var _this=this;//保存this的作用域以便于在其它作用域上使用这个作用域
• if(ifElse){//如果条件成立
• setTimeout(function(){$(_this).attr('src',$imgSrc);},1000);//把图片的src地址改成data-src的值（前面已经获取了）
• }
• })//end object 'img'
• })//end object window
• </script>

====================================================================================================================================================================

 

-它的实现原理很简单，先把img的src指向一个小图片，图片真实的地址存储在img一个自定义的属性里,<img src="lazy-load.png" data-src="xxx" />,等到此图片出现在视野范围内了，获取img元素，把data-src里的值赋给src。

（一）获取窗口、窗口滚动和元素距离窗口顶部的偏移高度，计算元素是否出现在窗口可视范围内；

function isShow($el){

var winH = $(window).height(),//获取窗口高度 scrollH = $(window).scrollTop(),//获取窗口滚动高度 top = $el.offset().top;//获取元素距离窗口顶部偏移高度

if(top < scrollH + winH){

return true;//在可视范围

}else{

return false;//不在可视范围

} }

（二）监听窗口滚动事件，检查元素是否在可视范围内;

 $(window).on('scroll', function(){//监听滚动事件 checkShow(); }) checkShow(); function checkShow(){//检查元素是否在可视范围内 $('img').each(function(){//遍历每一个元素 var $cur = $(this); if(!!isloaded($cur)){return;}//判断是否已加载 if (isShow($cur)) { setTimeout(function(){ showImg($cur); },300)//设置时间是为了更好的看出效果 }; }); }

（三）元素显示的时候把之前的默认照片替换成data-src里的照片。

 function showImg($el){
        $el.attr('src', $el.attr('data-src'));
        $cur.data('isloaded',true);
    }