js实现图片懒加载

概述

如果是一个图片列表页，虽然好看，但是相关图片的加载要耗费非常长的时间，等待图片一格一格的加载，实在让人抓狂，如何优化此类页面呢？

详细

代码下载：http://www.demodashi.com/demo/10779.html

笔者总结有两种方法优化（欢迎在文章评论中给我留言介绍其它方法）：

1.利用ajax技术将此类页面做成瀑布流
2.图片懒加载

综上所述，如果在没有ajax支持的情况下，图片懒加载是一个非常好的选择。

一、准备工作

本例子实现图片懒加载功能，其中需要用到html5的data自定义属性dataset来获取某一个节点的值、动态创建节点creatElement和怎样判断节点到顶部的距离（offsetTop，offsetParent）等js方法：

值	描述	测试

data-*	data-* 属性用于存储私有页面后应用的自定义数据。 data-* 属性可以在所有的 HTML 元素中嵌入数据。自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。 data-* 属性由以下两部分组成：属性名不要包含大写字母，在 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();
}