概述
詳細
筆者總結有兩種方法優化（歡迎在文章評論中給我留言介紹其它方法）：
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();
}
三、運行效果
文件截圖：
運行時的截圖:
