懒加载 lazy load

最新推荐文章于 2025-01-08 15:16:23 发布

转载最新推荐文章于 2025-01-08 15:16:23 发布 · 87 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/vanstrict/p/5653059.html

本文详细介绍了图片懒加载(LoadOnDemand)技术，这是一种在网页滚动时动态加载图片的方法，可以显著提高网页加载速度和用户体验，同时减轻服务器负担。文章通过实例展示了如何使用自定义属性data-src和JavaScript实现图片懒加载。

懒加载(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);  
        }  
    }    
};

转载于:https://www.cnblogs.com/vanstrict/p/5653059.html