DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> js圖片延遲加載的實現方法及思路
js圖片延遲加載的實現方法及思路
編輯：JavaScript綜合知識     
這裡延遲加載的意思是，拖動滾動條時，在圖片出現在浏覽器顯示區域後才加載顯示。  

大概的實現方式是：
在頁面的load沒有觸發之前，把所有的指定id的元素內的img放入到imgs中，將所有的圖片的src值放入到一個新建的_src屬性中，把src設置為指定的顯示圖片。
然後，在document.body的scroll事件觸發時，循環計算imgs中的img元素位置是否正好在浏覽器顯示框范圍內，如果是，則將img元素的_src屬性的值賦給src，這樣圖片就能顯示出來。
這 裡比較麻煩地方是，如何計算img的位置，獲得元素的相對於頁面的絕對位置。通常是用offsetLeft和offsetTop，但這兩個屬性是元素的 offsetParent指向的元素的相對位置， 如果offsetParent所指的元素是設置了浮動的或使用絕對定位，那麼offsetLeft來獲得絕對位置就不正確呢。
在這裡我是將元素的所有父級元素的offsetTop之和來獲得文檔絕對位置的。

復制代碼 代碼如下:
//取元素的頁面絕對 X位置
        var getLeft = function(El){
            var left = 0;
            do{
                left += El.offsetLeft;
            }while((El = El.offsetParent).nodeName != 'BODY');
            return left;
        };
        //取元素的頁面絕對 Y位置
        var getTop = function(El){
            var top = 0;
            do{
                top += El.offsetTop;
            }while((El = El.offsetParent).nodeName != 'BODY');
            return top;
        };


在設置窗口的scroll事件時，ie使用是document.documentElement，而其他的浏覽器都使用document。
 接下來是要獲得浏覽器顯示窗口現對於文檔的位置，用了下面的代碼來計算

復制代碼 代碼如下:
//讀取滾動條的位置和浏覽器窗口的顯示大小
             var top = isGoo ? document.body.scrollTop : document.documentElement.scrollTop,
                 left = isGoo ? document.body.scrollLeft :document.documentElement.scrollLeft,
                 width = document.documentElement.clientWidth,
                 height = document.documentElement.clientHeight;


谷歌浏覽器要通過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="http://www.jb51.net/small/2011_4_22/photo163115955184917.jpg" alt="" /> </td>
<td><img src="http://www.jb51.net/small/2011_4_13/photo163175537548397.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="http://www.jb51.net/small/2011_4_16/photo16314557927776.jpg" alt="" /> </td>
<td><img src="http://www.jb51.net/small/2011_4_10/photo1631932180569094.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="http://www.jb51.net/small/2011_4_1/photo1630540642223.jpg" alt="" /> </td>
<td><img src="http://www.jb51.net/small/2011_4_2/photo1638657445827.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="http://www.jb51.net/small/2011_3_29/photo16384188604.jpg" alt="" /> </td>
<td><img src="http://www.jb51.net/small/2011_3_29/photo16384188604.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="http://www.jb51.net/small/2011_4_13/photo16311444254618471.jpg" alt="" /> </td>
<td><img src="http://www.jb51.net/small/2011_3_15/photo16318118126415.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="http://www.jb51.net/small/2011_3_14/photo16310513957332.jpg" alt="" /> </td>
<td><img src="http://www.jb51.net/small/2011_3_14/photo16310342238265.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="http://www.jb51.net/small/2011_3_14/photo163103452142757.jpg" alt="" /> </td>
<td><img src="http://www.jb51.net/small/2011_3_14/photo16310310447460.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="http://www.jb51.net/small/2011_3_14/photo163103347259334.jpg" alt="" /> </td>
<td><img src="http://www.jb51.net/small/2011_3_14/photo16310342238265.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="http://www.jb51.net/small/2011_3_14/photo163102333593532.jpg" alt="" /> </td>
<td><img src="http://www.jb51.net/small/2011_3_14/photo16323618120479.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="http://www.jb51.net/small/2011_3_14/photo16323942409450.jpg" alt="" /> </td>
<td><img src="http://www.jb51.net/small/2011_3_15/photo1630653584606.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="http://www.jb51.net/small/2011_3_12/photo163233846816799.jpg" alt="" /> </td>
<td><img src="http://www.jb51.net/small/2011_3_13/photo16313216736705.jpg" alt="" /></td>
</tr>
<tr>
<td><img src="http://www.jb51.net/small/2011_3_1/photo16313391752186220.jpg" alt="" /> </td>
<td><img src="http://www.jb51.net/small/2011_3_1/photo163765186092776.jpg" alt="" /></td>
</tr>
</table>
<table id="out2" style="width:4883px">
<tr>
<td><img src="http://www.jb51.net/small/2011_4_22/photo163115955184917.jpg" alt="" /> </td>
<td><img src="http://www.jb51.net/small/2011_4_13/photo163175537548397.jpg" alt="" /></td>
<td><img src="http://www.jb51.net/small/2011_4_16/photo16314557927776.jpg" alt="" /> </td>
<td><img src="http://www.jb51.net/small/2011_4_10/photo1631932180569094.jpg" alt="" /></td>
<td><img src="http://www.jb51.net/small/2011_4_1/photo1630540642223.jpg" alt="" /> </td>
<td><img src="http://www.jb51.net/small/2011_4_2/photo1638657445827.jpg" alt="" /></td>
<td><img src="http://www.jb51.net/small/2011_3_29/photo16384188604.jpg" alt="" /> </td>
<td><img src="http://www.jb51.net/small/2011_3_29/photo16384188604.jpg" alt="" /></td>
<td><img src="http://www.jb51.net/small/2011_4_13/photo16311444254618471.jpg" alt="" /> </td>
<td><img src="http://www.jb51.net/small/2011_3_15/photo16318118126415.jpg" alt="" /></td>
<td><img src="http://www.jb51.net/small/2011_3_14/photo16310513957332.jpg" alt="" /> </td>
<td><img src="http://www.jb51.net/small/2011_3_14/photo16310342238265.jpg" alt="" /></td>
<td><img src="http://www.jb51.net/small/2011_3_14/photo163103452142757.jpg" alt="" /> </td>
<td><img src="http://www.jb51.net/small/2011_3_14/photo16310310447460.jpg" alt="" /></td>
<td><img src="http://www.jb51.net/small/2011_3_14/photo163103347259334.jpg" alt="" /> </td>
<td><img src="http://www.jb51.net/small/2011_3_14/photo16310342238265.jpg" alt="" /></td>
<td><img src="http://www.jb51.net/small/2011_3_14/photo163102333593532.jpg" alt="" /> </td>
<td><img src="http://www.jb51.net/small/2011_3_14/photo16323618120479.jpg" alt="" /></td>
<td><img src="http://www.jb51.net/small/2011_3_14/photo16323942409450.jpg" alt="" /> </td>
<td><img src="http://www.jb51.net/small/2011_3_15/photo1630653584606.jpg" alt="" /></td>
<td><img src="http://www.jb51.net/small/2011_3_12/photo163233846816799.jpg" alt="" /> </td>
<td><img src="http://www.jb51.net/small/2011_3_13/photo16313216736705.jpg" alt="" /></td>
<td><img src="http://www.jb51.net/small/2011_3_1/photo16313391752186220.jpg" alt="" /> </td>
<td><img src="http://www.jb51.net/small/2011_3_1/photo163765186092776.jpg" alt="" /></td>
</tr>
</table>
</body>
</html>
  <script type="text/javascript">
        function delayload(option){
            //讀取參數
            //圖片未加載時顯示的圖片
            var src = option.src ? option.src : '',
            //指定那些id下的img元素使用延遲顯示
                id = option.id ? option.id : [];
            //圖片列表
            var imgs = [];
            //獲得所有的圖片元素
            for(var i=0 ; i < id.length ; i++){
                var idbox = document.getElementById(id[i]),_imgs;
                if(idbox && (_imgs = idbox.getElementsByTagName('img'))){
                    for(var t=0 ; t < _imgs.length ; t++){
                        imgs.push(_imgs[t]);
                    }
                }
            }
            //將所有的圖片設置為指定的loading圖片
            for(var i=0 ; i < imgs.length ; i++){
                //圖片本來的圖片路徑放入_src中
                imgs[i].setAttribute('_src',imgs[i].src);
                imgs[i].src = src;
            }
            //取元素的頁面絕對 X位置
            var getLeft = function(El){
                var left = 0;
                do{
                    left += El.offsetLeft;
                }while((El = El.offsetParent).nodeName != 'BODY');
                return left;
            };
            //取元素的頁面絕對 Y位置
            var getTop = function(El){
                var top = 0;
                do{
                    top += El.offsetTop;
                }while((El = El.offsetParent).nodeName != 'BODY');
                return top;
            };
            //是否為ie，並讀出ie版本
            var isIE = !!navigator.userAgent.match(/MSIEbs*([0-9].[0-9]);/img);
            isIE && (isIE = RegExp.$1);
            //是否為chrome
            var isGoo = !!navigator.userAgent.match(/AppleWebKitb/img);
            //獲得可以觸發scroll事件的對象
            var box = isIE ? document.documentElement : document;
            //body元素的scroll事件
            var onscroll = box.onscroll = function(){
                //讀取滾動條的位置和浏覽器窗口的顯示大小
                var top = isGoo ? document.body.scrollTop : document.documentElement.scrollTop,
                    left = isGoo ? document.body.scrollLeft :document.documentElement.scrollLeft,
                    width = document.documentElement.clientWidth,
                    height = document.documentElement.clientHeight;
                //對所有圖片進行批量判斷是否在浏覽器顯示區域內
                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;
                        }
                    }
                }
            };
            var load = new Image();
            load.src = src;
            load.onload = function(){
                onscroll();
            };
        }
        delayload({id:['out1','out2'],src:'http://files.jb51.net/file_images/article/201307/2013072210300234.jpg'});
      </script>

JavaScript綜合知識
javascript中字符串的定義示例代碼
 javascript中字符串如何定義，下面有個不錯的示例，大家可以學習下 代碼
本人自用的global.js庫源碼分享
 這篇文章主要介紹了本人自用的global.js庫源碼分享,源碼中包含常用WEB操作,如命
javascript格式化json顯示實例分析
 　　javascript格式化json顯示。      &

相關文章

JavaScript基礎知識JSON基礎正則表達式關於JavaScriptJavaScript技巧jQuery入門知識AJAX入門JavaScript綜合知識
小編推薦
js實現俄羅斯方塊小游戲分享 JavaScript對傳統文檔對象模型的支持 AspNet中使用JQuery boxy插件的確認框 一個網頁標題title的閃動提示效果實現思路 js控制div彈出層實現方法 JS自動適應的圖片彈窗實例 獲取當前點擊按鈕的id用this.id實現 javascript計算用戶打開網頁的停留時間 js獲取通過ajax返回的map型的JSONArray的方法 jquery動態加載select下拉框示例代碼
熱門推薦
前台js調用後台方法 js 有框架頁面跳轉 彈出最簡單的模式化遮罩層的js代碼 JS返回iframe中frameBorder屬性值的方法 使用AngularJS對路由進行安全性處理的方法 javascript刪除字符串最後一個字符 Javascript中的arguments與重載介紹 如何使用HTML5地理位置定位功能 JavaScript獲取文本框內選中文本的方法
大家都在看
JQuery中serialize() 序列化 使用javascript將時間轉換成今天，昨天，前天等格式 javascript中的繼承實例代碼 jQuery實現統計輸入文字個數的方法 jQuery獲得包含margin的outerWidth和outerHeight的方法教程 初學js插入節點appendChild insertBefore使用方法 AJAX Hacks 之HACK3. 使用獨立的文件來取得httprequest Ajax四種元素的關系介紹
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved