js实现图片懒加载
概述
详细
笔者总结有两种方法优化（欢迎在文章评论中给我留言介绍其它方法）：
1.利用ajax技术将此类页面做成瀑布流
2.图片懒加载
综上所述，如果在没有ajax支持的情况下，图片懒加载是一个非常好的选择。
一、准备工作
本例子实现图片懒加载功能，其中需要用到html5的data自定义属性dataset来获取某一个节点的值、动态创建节点creatElement和怎样判断节点到顶部的距离（offsetTop，offsetParent）等js方法：
| 值 | 描述 | 测试 |
|---|---|---|
| data-* |
data-* 属性用于存储私有页面后应用的自定义数据。 data-* 属性可以在所有的 HTML 元素中嵌入数据。 自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。 data-* 属性由以下两部分组成：
|
测试 |
| createElment | createElement() 方法通过指定名称创建一个元素 | 测试 |
| offsetTop | 返回当前元素的相对垂直偏移位置的偏移容器 | |
| offsetParent | 返回元素的偏移容器 |
二、程序实现
1、实现思路：
页面加载后只让文档可视区内的图片显示，其它不显示，随着用户对页面的滚动，判断其区域位置，生成img标签，让到可视区的图片加载出来（正所谓响应了党的号召：让一部分人先富起来，从而带动其他人富起来，最终实现共同富裕）。
2、相关技术掌握：
给img的父级加属性 (例如data-src），将图片的地址赋值给他，这样就生成img标签后再把data-src的值赋给img的src（通过dataset.src或者getAttribute('src'),再赋值给img.setAttribute('src')）
3、相关代码：
html部分
<ul>
<li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t"><i></i></li>
<li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
<li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01a3SXHo2hZ/XYAC5TLk4uYWXn.jpg!t"><i></i></li>
<li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
<li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
<li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
<li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
<li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
<li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
<li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
<li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
<li data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"><i></i></li>
<li data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"><i></i></li>
<li data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"><i></i></li>
<li data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"><i></i></li>
<li data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"><i></i></li>
<li data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"><i></i></li>
</ul>
js部分
（1）获取节点和节点的“data-src”属性，继而判断此节点的子节点有没有创建img，没有则动态创建img标签将其“data-src”的值赋给img的src，有则不做任何处理
/* 获取节点 */
var oUl = document.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
/* 创建img标签函数 */
function createImg(obj){
var src = '';
if(obj.dataset.src){
src = obj.dataset.src;
}else{
src = obj.getAttribute('data-src');
}
if(obj.children.length <= 1){
var img = document.createElement('img');
img.src = src;
obj.appendChild(img);
}
}
（2）通过“offsetTop”来连续获取节点到文档顶部的距离并更新，直到节点再没有父级为止
function getTop(obj){
var h = 0;
while(obj){
h += obj.offsetTop;
obj = obj.offsetParent;
}
return h;
}
（3）滚动实时计算所到区域计算“节点到顶部距离”与“滚动条滚动距离”的大小，当“滚动条滚动距离”大于“节点到顶部距离”时开始创建一个img（（1）的函数）
window.onscroll = function(){
var t = document.documentElement.clientHeight + (document.body.scrollTop || document.documentElement.scrollTop);
for(var i=0;i<aLi.length;i++){
if(getTop(aLi[i]) < t){
setTimeout('createImg(aLi['+i+'])',500)
}
}
}
/* 页面加载完便执行一次滚动函数 */
window.onload = function(){
window.onscroll();
}
三、运行效果
文件截图：
运行时的截图:
