大概的實作方式是: 在頁面的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;
do{
top = El.offsetTop;
return top;
};
複製程式碼 程式碼如下: //讀取捲軸的位置和瀏覽器視窗的顯示大小
> left = isGoo ? document.body.scrollLeft :document.documentElement.scrollLeft. Width,
height = document.documentElement.clientHeight;
最後迭代判斷img的位置,並顯示圖片 程式碼如下:
//對所有圖片進行批次判斷是否在瀏覽器顯示區域內 for(var i=0 ; i //判斷圖片是否顯示區域內 _left >= left && top height && _left getAttribute('_src'); //若圖片已顯示,則以取消賦值 [i].src !== _src){ } } > 複製程式碼
程式碼如下:
js图片延迟加载
td>
table>
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
2025-02-26 03:58:14
2025-02-26 03:38:10
2025-02-26 03:17:10
2025-02-26 02:49:09
2025-02-26 01:08:13
2025-02-26 00:46:10
2025-02-25 23:42:08
2025-02-25 22:50:13
2025-02-25 21:54:11
2025-02-25 20:45:11
最新問題
2025-03-19 09:10:13
2025-03-18 15:17:30
2025-03-18 15:16:33
2025-03-18 15:14:33
2025-03-18 15:12:30