jquery圖片延遲加載前端開發(fā)技能必備系列

更新時間：2012年06月18日 16:18:15 作者：

在網(wǎng)上經(jīng)常會看到一些很長的網(wǎng)頁會延遲加載其中的圖片，我認為這是一種按需分配的做法，網(wǎng)頁只為那些想繼續(xù)瀏覽網(wǎng)頁的人加載后面的圖片，在不影響用戶體驗的前提下，最大程度地減少服務器負擔和流量

目前，主要的購物網(wǎng)站都采用了這種加載方式。今天在一個網(wǎng)友的站里發(fā)現(xiàn)一個圖片延遲加載的插件，很好用，在這里介紹一下。
先介紹一下圖片延遲加載原理。我們需要先將圖片的真實地址保存在一個自定義的屬性中（屬性名任你發(fā)揮吧，這里我用的是lazy-src），而圖片的src屬性中用一個占位圖片來替代，這個占位圖片當然是越小越好，它基本上只干活、不露面。

復制代碼代碼如下:

 
<img src="images/placeholder.png" lazy-src="images/realimg.jpg" alt="" /> 
<!-- 如果瀏覽器禁用了js，我們也不能不讓網(wǎng)頁顯示圖片撒，所以最好是加上下面一句備用代碼 --> 
<noscript><img src="images/realimg.jpg" alt="" /></noscript> 

首先。頁面開始加載時瀏覽器會獲取所有圖片在當前頁面中的位置并緩存(獲取offset的值時，頁面的reflow會被引發(fā))，計算出可視區(qū)域，當圖片的位置出現(xiàn)在可視區(qū)域中，利用js動態(tài)地將圖片標簽中的src值替換成圖片真實的地址，這時，剛剛出現(xiàn)在可視區(qū)域的圖片便開始加載。
其次。當用戶向下滾動頁面時，通過js再次計算是否有圖片初次出現(xiàn)可視區(qū)域內，如果有，剛對這些圖片的src值進行替換，并開始加載真實圖片。為了避免重復操作引起的內存泄漏，需要在全部圖片加載完后，卸載掉相應的觸發(fā)事件。
最后。本文是將整個窗口看成是一個大容器，如果愿意，也可以在頁面中設置一個小容器，在小容器中也同樣可以實現(xiàn)圖片的延遲加載。原理雖然簡單，但是應用是多樣的。
從下面的地址可以看到圖片延遲加載的演示，不過盡量使用相應的工具(firebug、Fiddler2)監(jiān)測圖片延遲加載的效果。
圖片延遲加載插件的代碼如下：

復制代碼代碼如下:

 
圖片延遲加載插件代碼 
(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數(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 ){ 
var scrollCoord = container[ SCROLL ](), 
winSize = vertical ? 
container.height() : 
container.width(); 
return coord >= scrollCoord && 
coord <= ( winSize + scrollCoord + threshold ); 
} 
}; 
var loader = function( triggerElem, event ){ 
var i = 0, 
isCustom = false, 
isTrigger, coord, elem, $elem, lazySrc; 
// 自定義事件只要觸發(fā)即可，無需再判斷 
if( event ){ 
if( event !== 'scroll' && event !== 'resize' ){ 
isCustom = true; 
} 
} 
else{ 
event = 'init'; 
} 
for( ; i < elems.length; i++ ){ 
isTrigger = false; 
elem = elems[i]; 
$elem = $( elem ); 
lazySrc = $elem.attr( o.attr ); 
if( !lazySrc || elem.src === lazySrc ){ 
continue; 
} 
// 先從緩存獲取offset值，緩存中沒有才獲取計算值, 
// 將計算值緩存，避免重復獲取引起的reflow 
coord = $elem.data( dataName ); 
if( coord === undefined ){ 
coord = $elem.offset()[ OFFSET ]; 
$elem.data( dataName, coord ); 
} 
isTrigger = isCustom || trigger[ event ]( coord ); 
if( isTrigger ){ 
// 加載圖片 
elem.src = lazySrc; 
if( o.fadeIn ){ 
$elem.hide().fadeIn(); 
} 
// 移除緩存 
$elem.removeData( dataName ); 
// 從DOM數(shù)組中移除該DOM 
elems.splice( i--, 1 ); 
} 
} 
// 所有的圖片加載完后卸載觸發(fā)事件 
if( !elems.length ){ 
if( triggerElem ){ 
triggerElem.unbind( event, fire ); 
} 
else{ 
container.unbind( o.event, fire ); 
} 
$( window ).unbind( 'resize', fire ); 
elems = null; 
} 
}; 
var fire = function( e ){ 
loader( $(this), e.type ); 
}; 
// 綁定事件 
container = event === 'scroll' ? container : $( this ); 
container.bind( event, fire ); 
$( window ).bind( 'resize', fire ); 
// 初始化 
loader(); 
return this; 
}; 
})( jQuery ); 

有關這個的插件API說明如下：
attr string
存放圖片真實地址的屬性名，與HTML對應，默認是lazy-src。
container dom & selector
默認的容器為window，可自定義容器。
event stirng
觸發(fā)圖片加載的事件類型，默認為window.onscroll事件
fadeIn boolean
是否使用jQuery的fadeIn效果來顯示，默認是false。
threshold number
頁面滾動到離圖片還有指定距離的時候就進行加載，默認是0。
vertical boolean
是否橫向滾動，默認為true(縱向)。
loadScript(增強版的功能) boolean
是否無阻塞加載javascript廣告圖片，默認為false。

注：轉載請注明出處。作者：愛蓮學堂

您可能感興趣的文章: