[前端]圖片預(yù)加載方法

　　目錄

1. 使用jQuery圖片預(yù)加載(延遲加載)插件Lazy Load
2. 使用JS實現(xiàn)圖片預(yù)加載
3. 使用CSS實現(xiàn)圖片預(yù)加載
4. 使用Ajax實現(xiàn)圖片預(yù)加載

1. 使用jQuery圖片預(yù)加載(延遲加載)插件Lazy Load

Lazy Load也叫惰性加載，延遲加載，顧名思義，就是在圖片未到達可視區(qū)域時，不加載圖片，我們常常在很多的優(yōu)秀網(wǎng)站上看到類似的例子，例如迅雷、土豆、優(yōu)酷等，由于一個網(wǎng)頁的圖片非常多，一次性加載增加服務(wù)器壓力，而且用戶未必會拉到底部，浪費用戶流量，Lazy Load采用按需加載，更快的加載速度從而達到優(yōu)化網(wǎng)頁的目的。

使用方法:

• 加載jQuery, 并在html代碼的底部包含進來

  <script src="jquery.js" type="text/javascript"></script>
  <script src="jquery.lazyload.js" type="text/javascript"></script>

• 設(shè)置圖片的占位符為data-original, 給圖片一個特別的標(biāo)簽, 像這樣設(shè)置圖片

  <img class="lazy" data-original="img/example.jpg" width="640" height="480">

  1 2 3

  $(function(){     $("img.lazy").lazyload(); });

  注意：你必須給圖片設(shè)置一個height和width，或者在CSS中定義，否則可能會影響到圖片的顯示。

• 插件選項

  圖片預(yù)先加載距離：threshold，通過設(shè)置這個值，在圖片未出現(xiàn)在可視區(qū)域的頂部距離這個值時加載。默認為0，下面為設(shè)置threshold為200表示在圖片距離可視區(qū)域還有200像素時加載。

  $("img.lazy").lazyload({
      threshold :200
  });

  事件綁定加載的方式：event，你可以使用jQuery的事件，例如“click”、“mouseover”，或者你也可以自定義事件，默認等待用戶滾動，圖片出現(xiàn)在可視區(qū)域。下面是使用click：

  1	$("img.lazy").lazyload({event:"click"});

  顯示效果：effect，默認使用show()，你可以使用fadeIn（逐漸出現(xiàn)）方式，代碼如下：

  1 2 3

  $("img.lazy").lazyload({     effect :"fadeIn" });

  對于禁用javascript的瀏覽器則要加上noscript內(nèi)容：

  <img class="lazy" data-original="img/example.jpg" width="640" heigh="480">
  <noscript><img src="img/example.jpg" alt="jQuery圖片預(yù)加載(延遲加載)插件Lazy Load" width="640" heigh="480"></noscript>

  圖片限定在某個容器內(nèi)：container，你可以通過限定某個容器內(nèi)容的圖片才會生效，代碼如下：

  #container {
      height:600px;
      overflow: scroll;
  }
  

  $("img.lazy").lazyload({
       container: $("#container")
  });　　

　　原文鏈接: jQuery圖片預(yù)加載(延遲加載)插件Lazy Load

2. JS實現(xiàn)圖片預(yù)加載

　　在瀏覽器渲染圖片的時候, 它獲得圖片的一片區(qū)域的時候, 就已經(jīng)為這張圖片預(yù)留了一片空白的區(qū)域來填充圖片, 這就是預(yù)加載獲得圖片尺寸最原始的使用方法.

　　有時候會加載一些在當(dāng)前頁面沒有用到的圖片，是為了提前加載到緩存里，這樣后面的頁面就可以直接從緩存讀取了。

　　加載大圖的時候，我們可以先顯示模糊的縮略圖，等到大圖加載完了，再把縮略圖替換掉，這樣填補了圖片加載期間的空白時間。

　　image也有onload和onerror事件，分別是加載完后和加載失敗時執(zhí)行。

　　Image對象是專門用于處理圖片加載的，就相當(dāng)于內(nèi)存中的img標(biāo)簽。

　　圖片預(yù)加載案例：鼠標(biāo)移入一張圖片時，換成另一張圖片，移出時換回原來的圖片。正常做法是，鼠標(biāo)移入的時候，改變圖片的src，但這時就要去加載圖片了，會等待一段時間，這樣體驗不好。預(yù)加載的做法是，在頁面加載完，鼠標(biāo)移入之前就通過Image對象把圖片加載進緩存了，這樣鼠標(biāo)移入的時候直接從緩存里讀取了，速度很快。

• 圖片預(yù)加載:

  1 2 3 4

  if(document.images){     var img = new Image();     img.src = "img/example.jpg"; }

• 封裝成一個預(yù)加載圖片的函數(shù)

  1 2 3 4 5 6 7 8 9 10 11 12

  //實現(xiàn)圖片的預(yù)加載 function preloadImg(srcArr){     if(srcArr instanceof Array){         for(var i=0; i<srcArr.length; i++){             var oImg = new Image();             oImg.src = srcArr[i];         }     } } //預(yù)加載圖片 preloadImg(['image/example.jpg']);  //參數(shù)是一個url數(shù)組

• 使用一個回調(diào)函數(shù)來獲得圖片的屬性

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  function getPreloadImgAttr(url,callback){     var oImg = new Image(); //創(chuàng)建一個Image對象,實現(xiàn)圖片的預(yù)加載     oImg.src = url;　　    // 看下一節(jié),其實應(yīng)當(dāng)先進行onload的綁定,再賦值給src     if(oImg.complete){         //如果圖片已經(jīng)存在于瀏覽器緩存,直接調(diào)用回調(diào)函數(shù)         callback.call(oImg);         return; //直接返回,不再處理onload事件     }     oImg.onload = function(){         //圖片下載完畢時異步調(diào)用callback函數(shù)         callback.call(oImg);        }; } getPreloadImgAttr('image/example.jpg',function(){     console.log(this.width, this.height); });

• 關(guān)于預(yù)加載圖片的改進

  網(wǎng)上看到一篇博客關(guān)于圖片的預(yù)加載,你所不知道的, 其中指出以上通用的方法存在一些問題:
  

  • 創(chuàng)建了一個臨時匿名函數(shù)來作為圖片的onload事件處理函數(shù)，形成了閉包。

    相信大家都看到過ie下的內(nèi)存泄漏模式的文章，其中有一個模式就是循環(huán)引用，而閉包就有保存外部運行環(huán)境的能力（依賴于作用域鏈的實現(xiàn)），所以img.onload這個函數(shù)內(nèi)部又保存了對img的引用，這樣就形成了循環(huán)引用，導(dǎo)致內(nèi)存泄漏。（這種模式的內(nèi)存泄漏只存在低版本的ie6中，打過補丁的ie6以及高版本的ie都解決了循環(huán)引用導(dǎo)致的內(nèi)存泄漏問題）。

  • 只考慮了靜態(tài)圖片的加載，忽略了gif等動態(tài)圖片，這些動態(tài)圖片可能會多次觸發(fā)onload。

  • 　　改進方法:

    1 2 3 4 5 6 7 8

    function loadImage(url, callback) {         var img = new Image(); //創(chuàng)建一個Image對象，實現(xiàn)圖片的預(yù)下載         img.onload = function(){         img.onload = null;         callback(img);     }     img.src = url; }

    　　這樣內(nèi)存泄漏，動態(tài)圖片的加載問題都得到了解決，而且也以統(tǒng)一的方式，實現(xiàn)了callback的調(diào)用。
    關(guān)于這個方法, 有個疑問是緩存的問題, 在原文里也給出了一些解釋

    經(jīng)過對多個瀏覽器版本的測試，發(fā)現(xiàn)ie、opera下，當(dāng)圖片加載過一次以后，如果再有對該圖片的請求時，由于瀏覽器已經(jīng)緩存住這張圖

    片了，不會再發(fā)起一次新的請求，而是直接從緩存中加載過來。對于 firefox和safari，它們試圖使這兩種加載方式對用戶透明，同樣

    會引起圖片的onload事件，而ie和opera則忽略了這種同一性，不會引起圖片的onload事件，因此上邊的代碼在它們里邊不能得以實

    現(xiàn)效果。

　　　　　　但整體來講,仍然應(yīng)該先進行onload事件的綁定, 再賦值src

　　參考:[前端] 圖片預(yù)加載及獲取屬性  關(guān)于圖片的預(yù)加載,你所不知道的

3. 用CSS實現(xiàn)圖片的預(yù)加載

　　這個概念就是寫一個CSS樣式設(shè)置一批背景圖片，然后將其隱藏，這樣你就看不到那些圖片了。那些背景圖片就是你想預(yù)載的圖片。

　　這里為了隱藏這些圖片, 使用了位置設(shè)置為極大的負值的方法. 還可以直接設(shè)置 { width: 0; height: 0; display: none};

　　該方法雖然高效，但仍有改進余地。使用該法加載的圖片會同頁面的其他內(nèi)容一起加載，增加了頁面的整體加載時間。為了解決這個問題，我們增加了一些JavaScript代碼，來推遲預(yù)加載的時間，直到頁面加載完畢。代碼如下：

// better image preloading @ <a href="http:///press/2009/12/28/3-ways-preload-images-css-javascript-ajax/">http:///press/2009/12/28/3-ways-preload-images-css-javascript-ajax/</a>  
function preloader() {  
    if (document.getElementById) {  
        document.getElementById("preload-01").style.background = "url(http://d/image-01.png) no-repeat -9999px -9999px";  
        document.getElementById("preload-02").style.background = "url(http://d/image-02.png) no-repeat -9999px -9999px";  
        document.getElementById("preload-03").style.background = "url(http://d/image-03.png) no-repeat -9999px -9999px";  
    }  
}  
function addLoadEvent(func) {  
    var oldonload = window.onload;  
    if (typeof window.onload != 'function') {  
        window.onload = func;  
    } else {  
        window.onload = function() {  
            if (oldonload) {  
                oldonload();  
            }  
            func();  
        }  
    }  
}  
addLoadEvent(preloader);

　　在該腳本的第一部分，我們獲取使用類選擇器的元素，并為其設(shè)置了background屬性，以預(yù)加載不同的圖片。

　　該腳本的第二部分，我們使用addLoadEvent()函數(shù)來延遲preloader()函數(shù)的加載時間，直到頁面加載完畢。

　　如果JavaScript無法在用戶的瀏覽器中正常運行，會發(fā)生什么？很簡單，圖片不會被預(yù)加載，當(dāng)頁面調(diào)用圖片時，正常顯示即可。

　　參考: 純CSS圖片預(yù)加載  Javascript圖片預(yù)加載詳解

4. 使用Ajax實現(xiàn)預(yù)加載

　　該方法利用DOM，不僅僅預(yù)加載圖片，還會預(yù)加載CSS、JavaScript等相關(guān)的東西。使用Ajax，比直接使用JavaScript，優(yōu)越之處在于JavaScript和CSS的加載不會影響到當(dāng)前頁面。該方法簡潔、高效。

window.onload = function() {  
    setTimeout(function() {  
        // XHR to request a JS and a CSS  
        var xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://d/preload.js');  
        xhr.send('');  
        xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://d/preload.css');  
        xhr.send('');  
        // preload image  
        new Image().src = "http://d/preload.png";  
    }, 1000);  
};　　

　　上面代碼預(yù)加載了“preload.js”、“preload.css”和“preload.png”。1000毫秒的超時是為了防止腳本掛起，而導(dǎo)致正常頁面出現(xiàn)功能問題。

　　與之相比, 如果用js的話, 要實現(xiàn)以上加載過程則會應(yīng)用到頁面上. 實現(xiàn)如下

window.onload = function() {  
  
    setTimeout(function() {  
  
        // reference to <head>  
        var head = document.getElementsByTagName('head')[0];  
  
        // a new CSS  
        var css = document.createElement('link');  
        css.type = "text/css";  
        css.rel  = "stylesheet";  
        css.href = "http://d/preload.css";  
  
        // a new JS  
        var js  = document.createElement("script");  
        js.type = "text/javascript";  
        js.src  = "http://d/preload.js";  
  
        // preload JS and CSS  
        head.appendChild(css);  
        head.appendChild(js);  
  
        // preload image  
        new Image().src = "http://d/preload.png";  
  
    }, 1000);  
  
};

　　這里，我們通過DOM創(chuàng)建三個元素來實現(xiàn)三個文件的預(yù)加載。正如上面提到的那樣，使用Ajax，加載文件不會應(yīng)用到加載頁面上。從這點上看，Ajax方法優(yōu)越于JavaScript。

　　參考: Javascript圖片預(yù)加載詳解