什么是延迟加载
延迟加载又称懒加载（lazyload），是前端开发人员对网页性能优化的一种方案。延迟加载主要针对两种情况进行优化，一种是针对数据做延迟加载优化，一种是针对对象实例延迟创建优化。
工作原理：
- 在HTML构造输出的时候，先不要设置图片标签img的src属性，改用其他属性（如lazy）；
- 要判断图片（其他资源同理）是否在当前可视屏范围；
- 根据第二条的判断把其他属性（如lazy）中保存的值上设置给src属性，这样用户浏览到哪里浏览器就会加载哪里的图片。
延迟加载的实例
延迟加载图片比较麻烦的地方是如何判断图片位置。要获得元素相对页面的绝对位置，通常使用offsetTop，但是这个属性只是取得元素父元素的相对位置，如果元素的父元素或父元素的父元素设置了相对定位或绝对定位，那么这个值显然是不准确的。
所以，首先要用遍历的方式来获取元素的页面绝对边距。
eg.getTop = function(El){
var top = 0;
do{
top += El.offsetTop;//计算Top值
}while((El = El.offsetParent).nodeName != 'BODY');//获取到body结点为止
return top;
};
return eg;
});
然后，根据取得的值判断是否应该显示
eg.lazy = function(){
var doc = document;
var top = doc.documentElement.scrollTop || doc.body.scrollTop; //滚动条到顶部的高度
var winH = doc.documentElement.clientHeight||doc.body.clientHeight; //可视窗口的高度
var imgs = doc.getElementsByTagName("img");
//对所有图片进行批量判断是否在浏览器显示区域内
for(var i=0 ; i < imgs.length; i++){
var _src = imgs[i].getAttribute('lzay-src');
if( _src !== imgs[i].src ){ //判断图片是否已经显示过
var _top = eg.getTop(imgs[i]); //获取图片相对于顶部的位置
if( _top >= top && _top <= top+winH){ //判断图片是否在显示区域内
imgs[i].src = _src;
}
}
}
}
最后构建一个HTML代码
<!DOCTYPE html>
<html>
<head>
<title>懒加载</title>
<style>
div{float:left; min-width:150px; min-height:150px;}
</style>
</head>
<body>
<div><img src="loading.gif" lzay-src="1.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="2.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="3.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="4.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="5.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="6.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="7.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="8.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="9.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="10.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="11.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="12.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="13.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="14.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="15.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="16.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="17.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="18.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="19.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="20.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="21.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="22.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="23.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="24.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="25.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="26.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="27.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="28.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="29.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="30.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="31.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="32.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="33.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="34.jpg" alt=""></div>
<div><img src="loading.gif" lzay-src="35.jpg" alt=""></div>
</body>
</html>
<script src="base.js"></script>
<script src="eg5.js"></script>
<script>
eg.lazy();//判断页面打开时的第一屏是否有需要加载的图
window.onscroll = function(){//onscroll,onload,onresizeֻ只能这样添加
eg.lazy();
}
</script>