緩沖加載圖片的jQuery插件lazyload.js 使用方法詳解
來源:解決方案 2012-09-12
Lazy Load這個(gè)jQuery插件,是用來緩沖加載圖片的插件。如果一篇文章很長有很多圖片的話,下載圖片就需要很多時(shí)間。而這款插件,會(huì)檢測你的滾動(dòng)情況,只有你要看到那個(gè)圖片的時(shí)候,它才會(huì)從后臺(tái)請求下載圖片,然后顯示出來。使用這個(gè)插件,可以在需要顯示圖片的時(shí)候,才下載圖片,所以可以減少服務(wù)器的壓力,避免不必要的資源下載。如果一個(gè)人不看下面的圖片,那加載下面的圖片就是一種浪費(fèi)。
Lazy Load 插件原理
修改目標(biāo) img 的 src 屬性為 orginal 屬性,從而中斷圖片的加載。檢測滾動(dòng)狀態(tài),然后把可視網(wǎng)頁中的 img 的 src 屬性還原加載圖片,制造緩沖加載的效果。
但是現(xiàn)在,很多javascript大牛分析得出,這個(gè)插件其實(shí)并沒有真正的緩加載效果。確實(shí)是這樣,官方也已經(jīng)給出了說明和解決方法了。
問題原因:在新版的瀏覽器中,即使你刪除了 Javascript 控制的 src 屬性,瀏覽器仍然會(huì)去加載這個(gè)圖像。
解決方法:直接修改 HTML 的結(jié)構(gòu),在 img 標(biāo)簽中添加新的屬性,把 src 屬性的值指向占位圖片,添加 data-original 屬性,讓其指向真正的圖像地址。
例如:
這樣我們就需要先分析一下插件的優(yōu)缺點(diǎn),再?zèng)Q定是否要使用。
使用:
1.必須按照這種結(jié)構(gòu)才有實(shí)際作用,需要對輸出進(jìn)行定義。
2.可以節(jié)約服務(wù)器資源,并且有較好的用戶體驗(yàn)。
3.如果圖片很大,當(dāng)用戶滾動(dòng)到目標(biāo)位置,需要較長時(shí)間下載。
不使用:
1.增加服務(wù)器壓力,浪費(fèi)系統(tǒng)資源。
究竟使用不使用,還是要看你自己的實(shí)際需求。如果你圖片比較少,就不必使用了,如果你圖片比較多,可以考慮一下。但是,使用的話,你可能需要把每一 個(gè)img 標(biāo)簽上自己加上這個(gè)屬性,會(huì)稍微麻煩一點(diǎn)。潛行者m博客上,就用了這個(gè)插件,不過沒用使用官方說的那種結(jié)構(gòu),要的只是一個(gè)緩沖加載的效果。
開始使用 lazyload.js
第一步:加載相關(guān)文件。
很明顯,你要加載jquery和這個(gè)插件。你可以使用以下代碼,加載這幾個(gè)文件:
第二步:定義圖片結(jié)構(gòu)。
按照官方的建議,定義你的img結(jié)構(gòu):
第三步:觸發(fā)這個(gè)插件,生效。
激活以下,你就可以在目標(biāo)中使用了。
$(“img.lazy”).lazyload();
lazyload.js 高級(jí)使用方法:
下面部分來自官方文檔,將官方文檔進(jìn)行了一下簡單的翻譯。
更周全的做法
我們不得不思考這樣一個(gè)問題。我們定義了這樣一個(gè)結(jié)構(gòu),那么網(wǎng)頁中,就不會(huì)加載源圖像了。只有當(dāng) Javascript 執(zhí)行,才會(huì)顯示這個(gè)源圖像。如果用戶的瀏覽器不支持或者用戶關(guān)掉了支持 Javascript 的選項(xiàng),那么我們的這個(gè)圖像就無法顯示出來。也就是說,如果沒有 Javascript 的支持,我們的圖像就無法顯示出來。
應(yīng)對這個(gè)問題,我們需要引入noscript 標(biāo)簽。大體思路如下:用 noscript 包含真實(shí)的圖像位置,當(dāng)瀏覽器不支持 Javascript,直接顯示圖像。對現(xiàn)有圖像,隱藏處理,使用 show()方法觸發(fā)顯示。這樣,如果瀏覽器不支持 Javascript,我們自定義的 img 就不會(huì)出現(xiàn),而顯示 noscript 里面的圖像。具體實(shí)現(xiàn)代碼如下:
$(“img.lazy”).show().lazyload();
提前加載
默認(rèn)的情況是,當(dāng)你滾動(dòng)到圖片位置的時(shí)候,插件開始加載。這樣,用戶可能首先看到的是一個(gè)空白圖像,然后再緩慢出現(xiàn)。如果你想在用戶滾動(dòng)之前,提前加載這個(gè)圖像,你可以配置一下參數(shù)。
$(“img.lazy”).lazyload({ threshold : 200 });
threshold 這個(gè)參數(shù),就是用來提前加載的。上面這個(gè)語句的意思是,當(dāng)距離圖片還有200像素的時(shí)候,就開始加載圖片。
自定義觸發(fā)事件
默認(rèn)的觸發(fā)事件,是滾動(dòng),當(dāng)你滾動(dòng)的時(shí)候,就會(huì)檢查然后加載。你可以使用event屬性,設(shè)置你自己的加載事件,之后你可以自定義觸發(fā)這個(gè)事件的條件,然后去加載圖像。
$(“img.lazy”).lazyload({ event : “click” });
自定義顯示效果
默認(rèn)的圖片實(shí)現(xiàn)效果,就是沒有效果,下載完成之后,直接顯示出來。這樣的用戶體驗(yàn)并不好,你可以設(shè)置 effect 屬性,來控制顯示圖片的效果。例如
$(“img.lazy”).lazyload({ effect : “fadeIn” });
fadeIn的效果就是,改變圖片的透明度,漸現(xiàn)的方式出現(xiàn)。效果: effect demo page
把圖像插入某個(gè)容器
大家如果使用智能手機(jī)的話,經(jīng)常去應(yīng)用網(wǎng)站下載應(yīng)用,他們通常使用一個(gè)橫著的容器,放一些手機(jī)截圖。使用 container 屬性,能很輕松在容器中實(shí)現(xiàn)緩沖加載。首先,我們需要用css定義這個(gè)容器,然后用這個(gè)插件進(jìn)行加載。效果:vertical
#container { height: 600px; overflow: scroll; }
$(“img.lazy”).lazyload({
container: $(“#container”)
});
加載不可見圖像
有部分圖像是不可見的,我們對其加上類似 display:none 等屬性的圖像。默認(rèn)的情況下,這個(gè)插件是不會(huì)加載隱藏的不可見圖像。如果我們需要用它加載不可見圖像,我們需要將 skip_invisible 設(shè)置為 false
$(“img.lazy”).lazyload({ skip_invisible : false });
作者:潛行者m
文章來源:我愛水煮魚,轉(zhuǎn)載請注明出處。
文章編輯: 365webcall在線咨詢工具(www.365webcall.com)
我的評論
| 登錄賬號(hào)： | 密碼： | 快速注冊 | 找回密碼 |  |
