圖片延遲加載也稱懶加載，通常應用于圖片比較多的網頁，如果一個頁面圖片比較多，且頁面高度或寬度有好幾屏，頁面初次加載時，只顯示可視區域的圖片，當頁面滾動的時候，圖片進入了可視區域再進行加載，這樣可以顯著的提高頁面的加載速度，更少的圖片并發請求數也可以減輕服務器的壓力。如果用戶僅僅在首屏停留，還可以節省流量。如果TAB中的圖片較多，也同樣可以應用于TAB中，當觸發TAB時再進行圖片的加載。

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

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

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

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

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

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

下面是實現的代碼，我寫成了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對象轉換成DOM數組便于操作 
        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; 
 
    // 延遲加載的觸發器 
    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 ){ 
      &