概述
详细
代码下载：
笔者总结有两种方法优化（欢迎在文章评论中给我留言介绍其它方法）：
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部分
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
三、运行效果
文件截图：
运行时的截图:
