大概的實作方式是：
在頁面的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){
}
}
>
複製程式碼
程式碼如下:
