js圖片延遲載入的實作方法及思路_javascript技巧
- WBOY原創
- 2016-05-16 17:28:04977瀏覽
大概的實作方式是：
在頁面的load沒有觸發之前，把所有的指定id的元素內的img放入到imgs中，將所有的圖片的src值放入到一個新建的_src屬性中，把src設定為指定的顯示圖片。
然後，在document.body的scroll事件觸發時，循環計算imgs中的img元素位置是否正好在瀏覽器顯示框範圍內，如果是，則將img元素的_src屬性的值賦給src，這樣圖片就能顯示出來。
這裡比較麻煩地方是，如何計算img的位置，得到元素的相對於頁面的絕對位置。通常是用offsetLeft和offsetTop，但這兩個屬性是元素的offsetParent指向的元素的相對位置， 如果offsetParent所指的元素是設定了浮動的或使用絕對定位，那麼offsetLeft來獲得絕對位置就不正確呢。
在這裡我是將元素的所有父級元素的offsetTop之和來獲得文檔絕對位置的。
複製程式碼 程式碼如下:
//取元素的頁絕對X位置
//取元素的頁絕對X位置
//取元素的頁絕對X位置
//取元素的頁絕對X位置
var getLeft = function(El){
var left = 0;
.offsetLeft;
}while((El = El.offsetParent).nodeName != 'BODY' );
return left;
};
🎜> var top = 0;
top = El.offsetTop;
return top;
};
在設定視窗的scroll事件時，ie使用是document.documentElement，而其他的瀏覽器都使用document。 接下來是要取得瀏覽器顯示視窗現對於文件的位置，用了下面的程式碼來計算
複製程式碼
程式碼如下:
//讀取捲軸的位置和瀏覽器視窗的顯示大小
> left = isGoo ? document.body.scrollLeft :document.documentElement.scrollLeft. Width,程式碼如下:
//讀取捲軸的位置和瀏覽器視窗的顯示大小
height = document.documentElement.clientHeight;
//對所有圖片進行批次判斷是否在瀏覽器顯示區域內
for(var i=0 ; i //判斷圖片是否顯示區域內
_left >= left &&
top height &&
_left getAttribute('_src');
//若圖片已顯示，則以取消賦值 [i].src !== _src){
}
}
>
複製程式碼
程式碼如下:
 |  |
 |  |
 |  |
 | |
 |  |
 |  |
 |  |
 | |
 |  |
 |  |
 |  |
 |  |
| | | | | | |
 |
 |
 |
|
|
|
|
 |
|
|
 |
td> |
|