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

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

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

因為是使用javascript來（lái）加載（zǎi）圖片，如果用戶禁用了javascript，可以設（shè）置一（yī）個（gè）替代的方（fāng）案。

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

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

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

下麵是實（shí）現的代碼，我（wǒ）寫成了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數組便於（yú）操作 
        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 ){ 
      &