js實現網頁圖片延時加載(加載可見區域)的原理和代碼 提升網站打開速度

有時咱們看到一些大型網站，頁面若是有不少圖片的時候，當你滾動到相應的行時，當前行的圖片才即時加載的，這樣子的話頁面在打開只加可視區域的圖片，而其它隱藏的圖片則不加載，必定程序上加快了頁面加載的速度，對於比較長的頁面來講，這個方案是比較好的。

推薦：使用jquery圖片延遲加載插件jquery.lazyload實現圖片延遲

實現原理：

把全部須要延時加載的圖片改爲以下的格式：

<img lazy_src="圖片路徑" border="0"/>

而後在頁面加載時，把全部使用了lazy_src的圖片都保存到數組裏，而後在滾動時計算可視區域的top，而後把延時加載的圖片中top小於當前可視區域（即圖片出如今可視區域內）的圖片的src的值用lazy_src的來替換（加載圖片）：

JS代碼：

lazyLoad
 = (function()
 {  
    var map_element
 = {};
  
    var element_obj
 = [];
  
    var download_count
 = 0;
  
    var last_offset
 = -1;
  
    var doc_body;
  
    var doc_element;
  
    var lazy_load_tag;
  
    function initVar(tags)
 {
  
        doc_body
 = document.body;
  
        doc_element
 = document.compatMode == 'BackCompat' ?
 doc_body : document.documentElement;
  
        lazy_load_tag
 = tags || ["img", "iframe"];
  
    };
  
    function initElementMap()
 {
  
        var all_element
 = [];
  
        //從全部相關元素中找出須要延時加載的元素
  
        for (var i
 = 0,
  
len
 = lazy_load_tag.length; i < len; i++) {
  
            var el
 = document.getElementsByTagName(lazy_load_tag[i]);
  
            for (var j
 = 0,
  
len2
 = el.length; j < len2; j++) {
  
                if (typeof (el[j])
 == "object" &&
 el[j].getAttribute("lazy_src"))
 {
  
                    element_obj.push(all_element[key]);
  
                }
  
            }
  
        }
  
   
  
        for (var i
 = 0,
  
len
 = element_obj.length; i < len; i++) {
  
            var o_img
 = element_obj[i];
  
            var t_index
 = getAbsoluteTop(o_img); //獲得圖片相對document的距上距離
  
            if (map_element[t_index])
 {
  
                map_element[t_index].push(i);
  
            } else {
  
                //按距上距離保存一個隊列
  
                var t_array
 = [];
  
                t_array[0]
 = i;
  
                map_element[t_index]
 = t_array;
  
                download_count++; //須要延時加載的圖片數量
  
            }
  
        }
  
   
  
    };
  
    function initDownloadListen()
 {
  
        if (!download_count) return;
  
        var offset
 = (window.MessageEvent && !document.getBoxObjectFor) ? doc_body.scrollTop : doc_element.scrollTop;
  
        //可視化區域的offtset=document的高+
  
        var visio_offset
 = offset + doc_element.clientHeight;
  
        if (last_offset
 == visio_offset) {
  
            setTimeout(initDownloadListen,
 200);
  
            return;
  
        }
  
        last_offset
 = visio_offset;
  
        var visio_height
 = doc_element.clientHeight;
  
        var img_show_height
 = visio_height + offset;
  
        for (var key in map_element)
 {
  
            if (img_show_height
 > key) {
  
                var t_o
 = map_element[key];
  
                var img_vl
 = t_o.length;
  
                for (var l
 = 0; l < img_vl; l++) {
  
                    element_obj[t_o[l]].src
 = element_obj[t_o[l]].getAttribute("lazy_src");
  
                }
  
                delete map_element[key];
  
                download_count--;
  
            }
  
        }
  
        setTimeout(initDownloadListen,
 200);
  
    };
  
    function getAbsoluteTop(element)
 {
  
        if (arguments.length
 != 1 || element == null)
 {
  
            return null;
  
        }
  
        var offsetTop
 = element.offsetTop;
  
        while (element
 = element.offsetParent) {
  
            offsetTop
 += element.offsetTop;
  
        }
  
        return offsetTop;
  
    }
  
    function init(tags)
 {
  
        initVar(tags);
  
        initElementMap();
  
        initDownloadListen();
  
    };
  
    return {
  
        init:
 init
  
    }
  
})();

使用方法：把頁面上須要延時加載的圖片src改爲爲lazy_src，而後把上面的js放到body最後面，而後調用：lazyLoad.init();
調戲的方法可使用firebug來查看一時圖片是不是延時加載。
另外：
若是你的頁面上存在有內容切換的欄目的話，可能在切換時切換的內容裏的圖片可能會不顯示，處理的方法是在內容時單獨圖片加載處理，如：

///切換內容的代碼…
  
 chlid.find("img[init_src]").each(function(){
  
    $(this).attr("src",$(this).attr("init_src"));
  
    $(this).removeAttr("init_src");
  
 });

所謂圖片異步加載，意思是不用一次把圖片所有加載完，你能夠叫它延遲加載，緩衝加載都行。

  看看你有沒有這種需求：某篇文章圖片不少，若是在載入文章時就載入全部圖片，無疑會延緩載入速度，讓用戶等更久，因此，我想找這樣一種插件，讓網頁只加載 瀏覽器視野範圍內的圖片，沒出如今範圍內的圖片就暫不加載，等用戶滑動滾動條時再逐步加載。lazyload就是用來實現這種效果。
lazyload.js實際上是jQuery的一個插件，全稱是jquery.lazyload.js，看它的名字就知道它的做用了——就是偷懶載入的意思。因爲它是javascript寫的，因此適用於全部網頁，包括Wordpress。

  想要使用lazyload，得先載入jQuery，它是依靠jQuery來實現效果的。至於jQuery，你們不用去下載了，能夠直接鏈接存放在Google服務器上的jQuery文件，永遠不用擔憂丟失（固然，若是有天朝徹底屏蔽Google的那一天的話……）

特效優勢：

  加速wordpress站點的頁面載入速度；

  不唐突的圖片漸顯方式；

  代碼精簡，便於操做維護，JS代碼僅僅 1.6KB  先決條件是：你的站加載了 Jquery.js

原理：

  這個特效是少有的即華麗又加速的效果，由於它能判斷訪客是否是在查看當前圖片，若非則加載預留的填充圖片 grey.gif ，等到訪客滑動鼠標滑輪或瀏覽到圖片位置時，真正的圖片地址纔會加載。

   也就是說，若是訪客瞬間打開你的頁面，而後瞬間關閉，處於頁腳的圖片是不被加載的，何樂而不爲呢？

   不用擔憂對訪客的友好程度，這個效果會在圖片即將被瀏覽到的時候就開始加載圖片;

實現方法：

下載 jquery.lazyload.js

下載 預填充圖片 fill.gif

  將上面2文件，放到您的網站的某個目錄，或者你直接在外站調用。

    在當前主題的 header.php 中適當位置添加下面 JS調用代碼，我當期用的inove主題後臺就有添加js代碼的地方：

【部分請自定義】

 【$("img")部分能夠限定對頁面中的哪些img生效】好比修改爲$(".content img")

   壓縮包中除了lazyload.js外，還有一個grey.gif圖片文件。這個圖片的做用是，當頁面上圖片未載入時，就顯示這張圖片。將JS文件與圖片傳到你的空間，而後在你主題的header.php文件中加入