圖片懶加載
現(xiàn)如今，網(wǎng)站載有的信息量越來(lái)越大，其中圖片占據(jù)著很大一部分，這樣一來(lái)可以使整個(gè)頁(yè)以面圖文結(jié)合的形式展現(xiàn)，更加美觀。
然而問(wèn)題來(lái)了，如果是一個(gè)圖片列表頁(yè)，雖然好看，但是相關(guān)圖片的加載要耗費(fèi)非常長(zhǎng)的時(shí)間，等待圖片一格一格的加載，實(shí)在讓人抓狂，如何優(yōu)化此類頁(yè)面呢？
解決的方法有兩種（筆者自己總結(jié)，歡迎在文章評(píng)論中給我留言介紹其它方法）：
1.利用ajax技術(shù)將此類頁(yè)面做成瀑布流
2.圖片懶加載
綜上所述，如果在沒(méi)有ajax支持的情況下，圖片懶加載是一個(gè)非常好的選擇。
原理：
頁(yè)面加載后只讓文檔可視區(qū)內(nèi)的圖片顯示，其它不顯示，隨著用戶對(duì)頁(yè)面的滾動(dòng)，判斷其區(qū)域位置，生成img標(biāo)簽，讓到可視區(qū)的圖片加載出來(lái)（正所謂響應(yīng)了黨的號(hào)召：讓一部分人先富起來(lái)，從而帶動(dòng)其他人富起來(lái)，最終實(shí)現(xiàn)共同富裕）。
所用相關(guān)技術(shù)：
給img的父級(jí)加屬性 (例如data-src），將圖片的地址賦值給他，這樣就生成img標(biāo)簽后再把data-src的值賦給img的src（通過(guò)dataset.src或者getAttribute('src'),再賦值給img.setAttribute('src')）。
相關(guān)代碼
·css部分
*{margin:0;padding:0;}
ul{overflow:hidden;}
li{list-style:none;width:10rem;height:12rem;border:1px solid #ccc;box-sizing:border-box;-webkit-box-sizing:border-box;float:left;overflow:hidden;position:relative;}
li i{width:20px;height:20px;border-radius:20px;position:absolute;border:2px solid #6feb95;z-index:0;left:50%;top:50%;margin-top:-11px;margin-left:-11px;animation:move 1s infinite;-webkit-animation:move 1s infinite;}
li i:before{position:absolute;width:5px;height:5px;border-radius:4px;content:'';box-shadow:0 0 10px #666;-webkit-box-shadow:0 0 10px #666;background:#fff;border:1px solid #fff;top:-3px;left:50%;margin-left:-3px;}
img{vertical-align:middle;border-width:0;width:100%;position:relative;z-index:1;}
@keyframes move{
0%{
transform:rotateZ(0);
}
100%{
transform:rotateZ(360deg);
}
}
@-webkit-keyframes move{
0%{
-webkit-transform:rotateZ(0);
}
100%{
-webkit-transform:rotateZ(360deg);
}
}
這里用css3寫(xiě)了一個(gè)可以循環(huán)轉(zhuǎn)動(dòng)的loading，相關(guān)的制作方法，歡迎觀看我的另一篇文章
不用設(shè)計(jì)，css制作各種loading……
·html部分
<ul>
<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/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>
<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>
<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部分
/* 獲取節(jié)點(diǎn) */
var oUl = document.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
/* 創(chuàng)建img標(biāo)簽函數(shù) */
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);
}
}
/* 計(jì)算節(jié)點(diǎn)到文檔頂部的距離 */
function getTop(obj){
var h = 0;
while(obj){
h += obj.offsetTop;
obj = obj.offsetParent;
}
return h;
}
/* 滾動(dòng)實(shí)時(shí)計(jì)算所到區(qū)域并進(jìn)行相關(guān)計(jì)算 */
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)
}
}
}
/* 頁(yè)面加載完便執(zhí)行一次滾動(dòng)函數(shù) */
window.onload = function(){
window.onscroll();
}
demo在這,建議在手機(jī)端觀看
