懒加载 lazy load

懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,

而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。

比如，用户滚动到相应位置时，显示相应的图片，否则不加载！！！

下面是一个图片懒加载的示例.

这个html文件上含有许多div标签，一个div标签下要添加一个子标签img用来显示一个图片，如果页面载入时全部从服

务器端下载图片资源，无疑十分耗费时间，所以我们将采用图片懒加载的方式，使用户滚动到当前位置时才加载该位置的图

片。

首先，在html中我们要借助自定义属性data-src来保存图片的资源地址

即所有的要显示图片的div标签加上一个data-src属性

<div class="lazyDone" data-src="http://你的图片资源地址0"></div>

<div class="lazyDone" data-src="http://你的图片资源地址1"></div>

<div class="lazyDone" data-src="http://你的图片资源地址2"></div>

<div class="lazyDone" data-src="http://你的图片资源地址3"></div>

<div class="lazyDone" data-src="http://你的图片资源地址4"></div>

<div class="lazyDone" data-src="http://你的图片资源地址5"></div>

<div class="lazyDone" data-src="http://你的图片资源地址6"></div>

<div class="lazyDone" data-src="http://你的图片资源地址7"></div>

<div class="lazyDone" data-src="http://你的图片资源地址8"></div>

<div class="lazyDone" data-src="http://你的图片资源地址9"></div>

在我们的js中就可以进行处理，识别出这些带有data-src标签的div。然后计算该位置到页面顶部的距离，判断用户是否

滚动到该位置，如果达到则取出它的data-src的value，创建一个子标签img，将div的data-src的值赋值给img的src属性。

然后显示这个img标签，用户就可以在该位置看到相应的图片了。

function setImg($obj){

     var src = $obj.getAttribute("data-src");

     var img = document.createElement("img");

     img.src = src;

     if($obj.children.length == 0){

        //第一次滚动到此位置时加载，之后资源已经下载，不用重复添加

        $obj.appendChild(img);

     }

}

//获得对象距离页面顶端的距离

 function getHeight($obj) {

     var h = $obj.offset().top;

     return h;

}

window.onscroll = function(){

     var $div = $(".lazyDone");

     for (var i = 0; i < $div.length; i++) {

        var $odiv = $div[i];

        //检查$odiv是否在可视区域

        var t = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);

        var h = getHegiht($odiv);

        if (h < t) {

            setImg($odiv);

        }

    }

};

巴特西

懒加载 lazy load

最新文章

热门文章