圖片延遲加載也稱（chēng）懶加載（zǎi），通常應用於圖片比較（jiào）多的網頁，如果（guǒ）一個頁麵圖片比較多，且頁麵高度或寬（kuān）度有好幾屏，頁麵（miàn）初次加（jiā）載時，隻顯示可視區域的圖片（piàn），當頁麵滾動的時候（hòu），圖片進（jìn）入了可視區域再進（jìn）行加（jiā）載（zǎi），這樣可以顯著的提高頁麵的加載速度，更少的圖片並發請求數（shù）也可以減輕服務器的壓力。如果用戶僅僅在首屏停留，還可以（yǐ）節省（shěng）流量。如果TAB中的圖片較多，也同樣（yàng）可以應用於TAB中，當觸（chù）發TAB時（shí）再進行圖片的加（jiā）載（zǎi）。

圖（tú）片延（yán）遲加載的原理比較簡單，先將圖片的真（zhēn）實地址緩存在一個自定義的（de）屬性(lazy-src)中，而src地址（zhǐ）使用一個1×1的全透明的占位（wèi）圖片來代替，當然（rán）占位圖片也可以是其他的圖（tú）片。

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

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

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

頁麵初次加載時獲取圖片在（zài）頁麵中的（de）位置並緩存(每次（cì）取offset的（de）值會引發頁麵的reflow)，計算出（chū）可視區域，當圖（tú）片的位置出現在可視區域中，將src的值替換成真實的地址，此時圖片就開始（shǐ）加載了。

當頁（yè）麵滾動的時候（hòu），再判斷圖片（piàn）已經緩存的位置值是否（fǒu）出現在可視區域內，進行替換src加載。當所有的圖片都加載完（wán）之後（hòu），將相應（yīng）的觸發事件卸載，避免重複（fù）操作引起的內存泄漏。將（jiāng）整個窗口看成是一個（gè）大（dà）容器，那麽也可以在頁麵中設置一個小容器，在小容器中（zhōng）也同樣可以實現圖片的延遲加載。

下麵（miàn）是實（shí）現的代碼，我寫成了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數組（zǔ）便於操作 
        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; 
 
    // 延遲加（jiā）載的觸發器 
    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 ){ 
      &