當我們打開一個頁面時，瀏覽器就會從上往下讀取頁面中的<img>標簽src中的地址，並且開啟線程來進行加載。
倘若用戶的網速不給力或者此頁面中的圖片太多時，就會發生每張圖片都加載了一點但是都沒有加載完成，導致最后沒有一個圖片能正常顯示。一方面讓用戶的體驗非常之差，試問誰會一直耐心的等待着頁面的加載？另一方面，加載每個圖片都要向服務器發送請求，這會增大服務器的壓力。
針對這種情況，就需要運用懶加載技術：先只加載可視窗口區域的圖片，當用戶向下拖動滾動條時再繼續加載后面的圖片（也是只加載目前可視窗口區域內的圖片）。1.這樣減少了加載時的線程數量，使可視區域內的圖片也能夠快速加載，優化了用戶體驗。2.減少了同一時間發向服務器的請求數，服務器壓力劇減。
那么我們是如何進行懶加載的呢？
我所使用的方法：在寫網頁<img>標簽時並不會將圖片的路徑放入src屬性。而是自定義一個其他的屬性eg：_src。將路徑放入這個自定義的屬性中。那么在加載頁面時，這個圖片一開始是無法加載的。而當瀏覽器的可視區域移動到此圖片上時，將_src中的路徑賦值給src屬性，並開始加載。
代碼如下：
function getFixed(obj){
//獲取非行間屬性
function getStyle(obj,styleName){
if (obj.currentStyle){
return obj.currentStyle[styleName];
}
else{
return getComputedStyle(obj,null)[styleName];
}
}
//要獲取圖片相對網頁頂部的距離，但圖片有被定位的父級
var iLeft=0;
var iTop=0;
var oParent=obj;
while(oParent){
if (oParent.tagName=="HTML"){
break;
}
iLeft+=oParent.offsetLeft;
iTop+=oParent.offsetTop;
if (oParent!=obj){
iLeft+=parseInt(getStyle(oParent,"borderWidth"));//offsetLeft不包括邊框，因此要把邊框加上
iTop+=parseInt(getStyle(oParent,"borderWidth"));
}
oParent=oParent.offsetParent;
}
return [iLeft,iTop];//當 break 后itop就是圖片相對網頁頂部的距離
}
window.onload=window.onscroll=function (){
var aImg=document.getElementsByTagName("img");
var bodyScrollTop=document.body.scrollTop||document.documentElement.scrollTop;
var scrollBottom=bodyScrollTop+document.documentElement.clientHeight;
for (var i=0; i<aImg.length; i++){
if (getFixed(aImg[i])[1]<=scrollBottom){//此時說明這圖片已經在可視區域內，應該開始加載了
aImg[i].src=aImg[i].getAttribute("_src");
}
}
}