js圖片延遲載入的實作方法及思路_javascript技巧-js教程-PHP中文網

大概的實作方式是：
在頁面的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;
        };

在設定視窗的scroll事件時，ie使用是document.documentElement，而其他的瀏覽器都使用document。接下來是要取得瀏覽器顯示視窗現對於文件的位置，用了下面的程式碼來計算

複製程式碼

 程式碼如下:

//讀取捲軸的位置和瀏覽器視窗的顯示大小

> 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){
                           }
                }
           >



複製程式碼

程式碼如下: