js圖片消極式載入如何?

最後更新：2013-12-01 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

這裡消極式載入的意思是，拖動捲軸時，在圖片出現在瀏覽器顯示地區後才載入顯示。
大概的實現方式是：

在頁面的load沒有觸發之前，把所有的指定id的元素內的img放入到imgs中，將所有的圖片的src值放入到一個建立的_src屬性中，把src設定為指定的顯示圖片。

然後，在document.body的scroll事件觸發時，迴圈計算imgs中的img元素位置是否正好在瀏覽器顯示框範圍內，如果是，則將img元素的_src屬性的值賦給src，這樣圖片就能顯示出來。

這裡比較麻煩地方是，如何計算img的位置，獲得元素的相對於頁面的絕對位置。通常是用offsetLeft和offsetTop，但這兩個屬性是元素的offsetParent指向的元素的相對位置，如果offsetParent所指的元素是設定了浮動的或使用絕對位置，那麼offsetLeft來獲得絕對位置就不正確呢。

在這裡我是將元素的所有父級元素的offsetTop之和來獲得文檔絕對位置的。

1         //取元素的頁面絕對 X位置
2         var getLeft = function(El){
3             var left = 0;
4             do{
5                 left += El.offsetLeft;
6             }while((El = El.offsetParent).nodeName != BODY);
7             return left;
8         };
9         //取元素的頁面絕對 Y位置
10         var getTop = function(El){
11             var top = 0;
12             do{
13                 top += El.offsetTop;
14             }while((El = El.offsetParent).nodeName != BODY);
15             return top;
16         };
在設定視窗的scroll事件時，ie使用是document.documentElement，而其他的瀏覽器都使用document。

接下來是要獲得瀏覽器顯示視窗現對於文檔的位置，用了下面的代碼來計算

1 //讀取捲軸的位置和瀏覽器視窗的顯示大小
2             var top = isGoo ? document.body.scrollTop : document.documentElement.scrollTop,
3                 left = isGoo ? document.body.scrollLeft :document.documentElement.scrollLeft,
4                 width = document.documentElement.clientWidth,
5                 height = document.documentElement.clientHeight;

Google瀏覽器要通過body來獲得scrollTop，而其他瀏覽器通過documentElement。

最後迭代判斷img的位置，並顯示圖片

//對所有圖片進行批量判斷是否在瀏覽器顯示地區內
            for(var i=0 ; i < imgs.length; i++){
                var _top = getTop(imgs[i]),_left = getLeft(imgs[i]);
                //判斷圖片是否在顯示地區內
                if( _top >= top &&
                    _left >= left &&
                    _top <= top+height &&
                    _left <= left+width){
                    var _src = imgs[i].getAttribute(_src);
                    //如果圖片已經顯示，則取消賦值
                    if(imgs[i].src !== _src){
                        imgs[i].src = _src;
                    }
                }
            }
可以啟動並執行代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>js圖片消極式載入</title>
</head>
<body>
<table id="out1" style="height:2450px;">
<tr>
<td><img src="" alt="\" /> </td>
<td><img src="" alt="\" /></td>
</tr>
<tr>
<td><img src="" alt="\" /> </td>
<td><img src="" alt="\" /></td>
</tr>
<tr>
<td><img src="" alt="\" /> </td>
<td><img src="" alt="\" /></td>
</tr>
<tr>
<td><img src="" alt="\" /> </td>
<td><img src="" alt="\" /></td>
</tr>
<tr>
<td><img src="" alt="\" /> </td>
<td><img src="" alt="\" /></td>
</tr>
<tr>
<td><img src="" alt="\" /> </td>
<td><img src="" alt="\" /></td>
</tr>
<tr>
<td><img src="" alt="\" /> </td>
<td><img src="" alt="\" /></td>
</tr>
<tr>
<td><img src="" alt="\" /> </td>
<td><img src="" alt="\" /></td>
</tr>
<tr>
<td><img src="

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

js圖片消極式載入如何?

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support