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

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

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

因?yàn)槭鞘褂胘avascript來(lái)加載圖片，如果用戶禁用了javascript，可以設(shè)置一個(gè)替代的方案。

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

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

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

下面是實(shí)現(xiàn)的代碼，我寫(xiě)成了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對(duì)象轉(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 ){ 
      &