圖片的預載入(Preload)與延遲載入(Lazyload)

圖片相對於HTML，CSS，JavaScript來說都是比較大的，因此圖片經常會影響到網頁的加載速度，影響用戶體驗。如果圖片過多，則瀏覽器則需要花大量的時間才能把所有的圖片載入完畢，而對於圖片信息非常重要的頁面，用戶不得不等待圖片完全載入了才能瀏覽頁面。因此就有人想出了預載入圖片技術來提高響應速度以及延遲載入技術來解決圖片過多問題。

預載入圖片(Preload)

預載入圖片主要是爲了響應速度問題，比如點擊下一頁時能快速顯示圖片，因爲如果在點擊時纔去載入圖片是很慢的。其原理就是在第一個頁面時就把後面可能用到的圖片先載入到瀏覽器裏來，因此緩存的關係，後面用到該圖片時並不需要從新下載。下面就是常用的幾種方法：

Image對象載入

這種方式主要使用Image對象來實現的。document.imags數組的成員都是一個個Image對象。創建一個Image對象後給它的src屬性賦值，這時瀏覽器就會去請求這張圖片並緩存起來，但是該Image對象並沒有加到dom中去，因此該圖片並不會顯示出來。

        var image = new Image();
        image.src = 'logo.jpg';
      

CSS背景圖片

它的原理就是利用背景圖片的方式要求瀏覽器去提前載入圖片，同時把這些背景圖片隱藏起來不讓顯示，個人覺得這種方法稍微麻煩了一些，不是很經常使用。

        #preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
        #preload-02 { back// better image preloading @ http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/
        function preloader() {
            if (document.getElementById) {
                document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";
                document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";
                document.getElementById("preload-03").style.background = "url(http://domain.tld/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);ground: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
        #preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }
      

使用img標籤

以上兩種方法都是依賴於JavaScript的，使用img標籤就可以不使用JavaScript來載入圖片了，原理就是把圖片的寬高設成1x1，然後把它藏起來，這樣就不影響當前頁面的使用了。

延遲載入圖片(lazyload)

所謂延遲載入就是當頁面上圖片非常多時，瀏覽器只載入當前屏幕的圖片，當用戶拖動或滾動屏幕時去載入下一屏的圖片，因爲很多時候頁面有很多屏，如果一次載入會很慢的。這對於購物網站或圖片展示網站來說特別有用。對於移動用戶來說流量那就是錢啊。

現在大家用的是一個名叫Lazy Load的jQuery插件，它提供了一個在線的Demo，用法其實很簡單了，大家可以參考一下下面的教程：

• 官方教程: http://www.appelsiini.net/projects/lazyload
• 中文教程: http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/

參考文章

• http://www.mediacollege.com/internet/javascript/image/preload.html
• http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/
• http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/