图片懒加载
图片懒加载一般运用到图片较多的页面，电商类的页面一般都有图片懒加载处理。
步骤：
- 将要懒加载的网页中的图片都设为同一张loading图片；
- 给图片设置data-src的属性，保存图片的真实地址；
- 当图片滚动到可视区域时，将图片src替换为真实地址。
结构层
<ul> <li> <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg"> </li> <li> <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg"> </li> <li> <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg"> </li> <li> <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg"> </li> <li> <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg"> </li> <li> <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg"> </li> <li> <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg"> </li> <li> <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg"> </li> <li> <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg"> </li> </ul>
表现层
容器尺寸最好设置成图片尺寸，避免layout，或者将图片设置成真实地址图片的大小
li{height:300px;}
行为层
下面这句判断图片进入可视区域
obj.getBoundingClientRect().top< document.documentElement.clientHeight
页面加载后首屏自动加载一次，不然进入页面滚动前的图片全是loading图片
window.onload = function() {
lazyload();
};
完整代码，已将需要注意的点都加上注释了：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>lazyLoad nick</title>
<style>
/*容器尺寸最好设置成图片尺寸，避免layout*/
li{height:300px;}
</style>
</head>
<body>
<ul>
<li>
<img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
</li>
<li>
<img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
</li>
<li>
<img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
</li>
<li>
<img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
</li>
<li>
<img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
</li>
<li>
<img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
</li>
<li>
<img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
</li>
<li>
<img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
</li>
<li>
<img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
</li>
</ul>
<script>
window.onscroll = function() {//滚动加载
lazyload();
};
window.onload = function() {//页面加载后首屏自动加载一次
lazyload();
};
function lazyload(lazy) {
lazy = lazy||50;//提前加载的距离
var images = document.images,i = 0, len = images.length;
for (; i < len; i++) {
var obj = images[i];
// obj.getBoundingClientRect().top< document.documentElement.clientHeight 判断元素滚动到可视区返回true
if (obj.getBoundingClientRect().top - lazy < document.documentElement.clientHeight && !obj.isLoad) {
obj.isLoad = true;//判断首次加载
imageLoaded(obj, obj.dataset.src);
}
}
}
function imageLoaded(obj,src){//img加载完成在设置src，避免img从顶部加载到尾部出现的白板
var img = new Image();
img.onload = function() {
obj.src = img.src;
};
img.src = src;
}
</script>
</body>
</html>
纯属没事乱捣腾，有建议或意见请q我！
