圖片延遲加載也稱懶加載，通常應(yīng)用于圖片比較多的網(wǎng)頁，如果一個頁面圖片比較多，且頁面高度或?qū)挾扔泻脦灼粒撁娉醮渭虞d時，只顯示可視區(qū)域的圖片，當頁面滾動的時候，圖片進入了可視區(qū)域再進行加載，這樣可以顯著的提高頁面的加載速度，更少的圖片并發(fā)請求數(shù)也可以減輕服務(wù)器的壓力。如果用戶僅僅在首屏停留，還可以節(jié)省流量。如果TAB中的圖片較多，也同樣可以應(yīng)用于TAB中，當觸發(fā)TAB時再進行圖片的加載。

圖片延遲加載的原理比較簡單，先將圖片的真實地址緩存在一個自定義的屬性(lazy-src)中，而src地址使用一個1×1的全透明的占位圖片來代替，當然占位圖片也可以是其他的圖片。

<img src="images/placeholder.png"  lazy-src="images/realimg.jpg" /> 

因為是使用javascript來加載圖片，如果用戶禁用了javascript，可以設(shè)置一個替代的方案。

<img src="images/placeholder.png"  lazy-src="images/realimg.jpg" alt="" /> 
<noscript><img src="images/realimg.jpg"  alt="" /></noscript> 

頁面初次加載時獲取圖片在頁面中的位置并緩存(每次取offset的值會引發(fā)頁面的reflow)，計算出可視區(qū)域，當圖片的位置出現(xiàn)在可視區(qū)域中，將src的值替換成真實的地址，此時圖片就開始加載了。

當頁面滾動的時候，再判斷圖片已經(jīng)緩存的位置值是否出現(xiàn)在可視區(qū)域內(nèi)，進行替換src加載。當所有的圖片都加載完之后，將相應(yīng)的觸發(fā)事件卸載，避免重復(fù)操作引起的內(nèi)存泄漏。將整個窗口看成是一個大容器，那么也可以在頁面中設(shè)置一個小容器，在小容器中也同樣可以實現(xiàn)圖片的延遲加載。

下面是實現(xiàn)的代碼，我寫成了jQuery插件。

(function( $ ){ 
$.fn.imglazyload = function( options ){ 
    var o = $.extend({ 
                attr        :   'lazy-src', 
                container   :   window, 
                event       :   'scroll', 
                fadeIn      :   false, 
                threshold   :   0, 
                vertical    :   true 
            }, options ), 
 
        event = o.event, 
        vertical = o.vertical, 
        container = $( o.container ), 
        threshold = o.threshold, 
        // 將jQuery對象轉(zhuǎn)換成DOM數(shù)組便于操作 
        elems = $.makeArray( $(this) ), 
        dataName = 'imglazyload_offset', 
        OFFSET = vertical ? 'top' : 'left', 
        SCROLL = vertical ? 'scrollTop' : 'scrollLeft', 
        winSize = vertical ? container.height() : container.width(), 
        scrollCoord = container[ SCROLL ](), 
        docSize = winSize + scrollCoord; 
 
    // 延遲加載的觸發(fā)器 
    var trigger = { 
 
        init : function( coord ){ 
            return coord >= scrollCoord && 
                            coord <= ( docSize + threshold ); 
        }, 
 
        scroll : function( coord ){ 
            var scrollCoord = container[ SCROLL ](); 
            return coord >= scrollCoord && 
                    coord <= ( winSize + scrollCoord + threshold ); 
        }, 
 
        resize : function( coord ){ 
      &