JavaScript 图片懒加载的简单实现

作者 Simmin 日期 2016-07-29
懒加载
JavaScript 图片懒加载的简单实现

一、语义

懒加载：延迟加载或者遇到触发条件才加载。
预加载：提前加载，当用户需要查看时从本地缓存中加载。

二、区别

1.两种行为完全相反， 懒加载是延缓加载，预加载是提前加载。
2.懒加载可以减轻服务器负担，预加载会增加服务器负担。

三、应用场景

1.图片太多，长时间加载不出页面，造成用户持续等待
2.实现滚动加载的效果

四、实现方式

延迟加载：使用setTimeout或setInterval进行加载延迟，如果用户在加载前就离开，自然就不会进行加载。

条件加载：符合某些条件或者触发了某些条件才开始异步加载。

可视区加载：仅仅加载用户可以看到的区域，这个主要监控滚动条来实现，一般距离用户看到的底边很近的时候开始加载，这样能保证用户下拉时图片正好接上，不会有太长时间的停顿。

五、实现方法

1.首先，创建ul列表，li有一个data-src属性，值为图片的地址（为了更好的效果，li的背景可以显示成loading动画）

<div id="pictures">
  <ul>
	<li data-src='./img/2.png'></li>
	<li data-src='./img/3.png'></li>
	<li data-src='./img/4.png'></li>
	<li data-src='./img/5.png'></li>
	<li data-src='./img/6.png'></li>
	<li data-src='./img/7.png'></li>
	<li data-src='./img/8.png'></li>
	<li data-src='./img/9.png'></li>
	<li data-src='./img/10.png'></li>
	<li data-src='./img/11.png'></li>
	<li data-src='./img/12.png'></li>
	<li data-src='./img/13.png'></li>
	<li data-src='./img/14.png'></li>
  </ul>
</div>

2.图片的动态记载就是当达到触发条件时，获取相应的li的data-src属性并创建图片

function showImages(index){
	var theLi = document.getElementById('pictures').children[0].children;
	
	var theSrc = theLi[index].getAttribute('data-src');
	var imgHtml = "<img src='"+theSrc+"'>";
	theLi[index].innerHTML = imgHtml;
}

3.延迟加载

function lazyload(){
	var theLiCount = document.getElementById('pictures').children[0].children.length;
	for (var i = 0; i < theLiCount; i++) {
		setTimeout("showImages(" + i + ")", 1000);
	};
}
lazyload();

4.可视区加载

//获得对象距离页面顶端的距离  
function getHeight(obj) {  
    var height = 0;  
    while (obj) {  
        height += obj.offsetTop;  
        obj = obj.offsetParent;  
    }  
    return height;  
}

offsetParent() 获得被定位的最近祖先元素。被定位是指元素的 CSS position 属性设置为 relative、absolute 或 fixed。

//监听页面滚动事件
 window.onscroll = function () {
    var theLi = document.getElementById('pictures').children[0].children;
    var theLiCount = theLi.length;
    for (var i = 0; i < theLiCount; i++) {
        //检查Li是否在可视区域
        var t = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);
        var h = getHeight(theLi[i]);
        if (h < t) {
            setTimeout("showImages(" + i + ")", 1000);
        }
    }
}; 
 window.onload = function () {
    window.onscroll();
};
FRIENDS