什么是LazyLoad技術(shù)？

在頁(yè)面上圖片比較多的時(shí)候，打開一張頁(yè)面必然引起與服務(wù)器大數(shù)據(jù)量的交互。尤其是對(duì)于高清晰的圖片，占了幾百K的空間。Lazy Load 是一個(gè)用 JavaScript 編寫的 jQuery 插件. 它可以延遲加載長(zhǎng)頁(yè)面中的圖片. 在瀏覽器可視區(qū)域外的圖片不會(huì)被載入, 直到用戶將頁(yè)面滾動(dòng)到它們所在的位置. 這與圖片預(yù)加載的處理方式正好是相反的。
在包含很多大圖片長(zhǎng)頁(yè)面中延遲加載圖片可以加快頁(yè)面加載速度. 瀏覽器將會(huì)在加載可見(jiàn)圖片之后即進(jìn)入就緒狀態(tài). 在某些情況下還可以幫助降低服務(wù)器負(fù)擔(dān)，這樣勢(shì)必會(huì)引起速度上質(zhì)的提升。
兼容：ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0其中safari和chrome部分功能不支持。

Lazy Load 靈感來(lái)自 Matt Mlinac 制作的 YUI ImageLoader 工具箱. 這是演示頁(yè)面。

原文的鏈接在:http://www.appelsiini.net/projects/lazyload


現(xiàn)在Lazy Load的版本已經(jīng)是1.8.1

下載地址: //www.dhdzp.com/jiaoben/63757.html

實(shí)例下載:

下載聲明：
1. 注：此代碼僅供學(xué)習(xí)交流，請(qǐng)勿用于商業(yè)用途。
2. 注：此代碼僅供學(xué)習(xí)交流，請(qǐng)勿用于商業(yè)用途。
文件信息： 文件名： Lazy Load延遲加載圖片實(shí)例
文件Hash：dd3e435124e377c2da33344d442f85d1
文件大小：1.1 MB
文件上傳日期：2012 年 3 月 25 日
文件更新日期：2012 年 3 月 25 日
文件描述：在頁(yè)面上圖片比較多的時(shí)候，打開一張頁(yè)面必然引起與服務(wù)器大數(shù)據(jù)量的交互。尤其是對(duì)于高清晰的圖片，占了幾百K的空間。Lazy Load 是一個(gè)用 JavaScript 編寫的 jQuery 插件. 它可以延遲加載長(zhǎng)頁(yè)面中的圖片. 在瀏覽器可視區(qū)域外的圖片不會(huì)被載入, 直到用戶將頁(yè)面滾動(dòng)到它們所在的位置. 這與圖片預(yù)加載的處理方式正好是相反的。

怎樣使用? 下面進(jìn)入正題.

Lazy Load 依賴于 jQuery. 請(qǐng)將下列代碼加入頁(yè)面 head 區(qū)域:

Lazy Load的使用方法十分簡(jiǎn)單,但新版做了一些調(diào)整,必須修改<img>標(biāo)簽的屬性。把<img>標(biāo)簽中的 src 屬性改為等待圖片的URL, data-original 屬性填上真正的圖片URL.
如下:

JS代碼如下:

這樣就能實(shí)現(xiàn)Lazy Load的效果了. Demo

看完Demo后,是不是覺(jué)得沒(méi)什么效果出現(xiàn)?這個(gè)問(wèn)題會(huì)在后面提到.

其實(shí),并非一定要使用它規(guī)定的 data-original 屬性來(lái)存放圖片URL.你也可以自己定制別的屬性名,如下:
<img class="lazy" src="img/grey.gif" data-attr="img/example.jpg" width="640" heigh="480">
JS代碼如下:



只需設(shè)置 data_attribute 屬性為對(duì)應(yīng)的名稱即可. (注意:html代碼大小寫不敏感!所以 "data-" 后面只能跟小寫字母或數(shù)字.)

對(duì)于不支持JavaScript的瀏覽器,應(yīng)該有相應(yīng)的降級(jí)處理.

可以使用<noscript>標(biāo)簽,是用來(lái)定義在腳本未被執(zhí)行時(shí)的替代內(nèi)容/文本.而且這樣做還有一個(gè)好處,因?yàn)樗阉饕娴呐老x是不處理JavaScript腳本的,所以能直接抓到<noscript>標(biāo)簽中的內(nèi)容.



CSS樣式設(shè)置:



JS代碼:


設(shè)置圖片加載的反應(yīng)距離
Lazy Load插件默認(rèn)的設(shè)置是:圖片在瀏覽器窗口上出現(xiàn),就會(huì)觸發(fā)加載.但通過(guò)設(shè)置 threshold 屬性的值,可以調(diào)整圖片的預(yù)先加載位置/距離.



另外, threshold 可以為正數(shù)或者負(fù)數(shù).正數(shù)是預(yù)先加載, 假設(shè)數(shù)值為200, 則圖片距離出現(xiàn)到屏幕還有 200px 時(shí),就開始加載.如果是負(fù)數(shù),則相反.假設(shè)數(shù)值為-200時(shí),則圖片已經(jīng)在窗口出現(xiàn),并且距離瀏覽器視窗底部的距離為 200px 時(shí),才開始加載.
PS:圖片和屏幕的距離是根據(jù)圖片的 top 位置計(jì)算.
注意:threshold的設(shè)置需要考慮網(wǎng)站的長(zhǎng)度和圖片的高度,如果數(shù)值過(guò)大則會(huì)導(dǎo)致無(wú)法加載的問(wèn)題.建議數(shù)值設(shè)置不要超過(guò)相應(yīng)圖片高度的一半.

通過(guò)事件觸發(fā)加載
可以通過(guò)jQuery定義的事件來(lái)觸發(fā)加載,也可以使用自己定義的事件.


實(shí)現(xiàn)動(dòng)畫效果
上面的Demo之所以會(huì)沒(méi)有圖片加載的效果,是因?yàn)長(zhǎng)azy Load默認(rèn)的圖片加載是通過(guò) jQuery 的show()方法來(lái)顯示,所以圖片出現(xiàn)幾乎是一瞬間.當(dāng)然我們還可以實(shí)現(xiàn)其他效果.



另外還可以使用 slideDown() 方法,但效果不佳.

如果想要控制動(dòng)畫的速度,還可以修改 effectspeed 屬性.

effectspeed 屬性默認(rèn)是空的,所以如果不設(shè)置它,動(dòng)畫的時(shí)間為400毫秒.
Container容器屬性
當(dāng)要延遲加載的圖片全擺在一個(gè)容器中.只需把 container 屬性指向擺放 img 的容器的對(duì)象.
css代碼:


js代碼:



廢話不多說(shuō),直接看Demo ,不單豎著的可以, 橫著也行Demo .

failure_limit的屬性
Lazy Load 有一個(gè)循環(huán)查找 img 的機(jī)制.根據(jù) HTML 文檔的布局從上往下查找,當(dāng)找到第一個(gè)并未顯示/加載的 img 時(shí),就會(huì)停止往下查找.(其實(shí)就是對(duì) $("img.lazy") 這個(gè)對(duì)象(組)進(jìn)行順序查找)

那這個(gè) failure_limit 的屬性有什么用呢?

現(xiàn)在網(wǎng)站設(shè)計(jì)時(shí),都會(huì)用到大量的定位樣式,如: float 和 position , 這樣在瀏覽器呈現(xiàn)的布局效果和 HTML 文檔中的 DOM 順序有很大差異.
這樣就會(huì)存在一種情況,某 <img> 標(biāo)簽已出現(xiàn)在屏幕上,但它卻無(wú)法顯示!! 因?yàn)樗?HTML 文檔中的實(shí)際位置排在了那些還沒(méi)有顯示的 <img> 標(biāo)簽后面, 這樣會(huì)導(dǎo)致顯示在屏幕上的這個(gè) <img> 標(biāo)簽無(wú)法加載相應(yīng)的圖片.當(dāng)Lazy Load 在找到第一個(gè)未顯示的 <img> 標(biāo)簽時(shí),查找已經(jīng)被終止了, 并沒(méi)有繼續(xù)往下遍歷.

所以這個(gè)時(shí)候,就可以使用failure_limit屬性.

這樣 Lazy Load 會(huì)查找到第10個(gè)未顯示的<img>標(biāo)簽處.當(dāng)在圖片多且布局復(fù)雜的頁(yè)面時(shí), failure_limit 的作用就很大了.
原文還溫馨提示:If you have a funky layout set this number to something high. 建議把該值調(diào)得更高.

延遲下載圖片
可以通過(guò)自定義事件,然后通過(guò) setTimeout 來(lái)設(shè)置延遲觸發(fā)該事件.

主要原理是,當(dāng) event 被設(shè)置為 scroll 以外的事件時(shí), 實(shí)際上都會(huì)綁定了一個(gè)內(nèi)置的 "appear" 事件.顧名思義, 這個(gè)事件就是用來(lái)顯示圖片的. (其實(shí) scroll 也是調(diào)用這個(gè)事件)

skip_invisible 加載不可見(jiàn)的圖片
Lazy Load 插件默認(rèn)對(duì)隱藏的圖片不加載(例如 display:none ). 這樣做有助于性能的優(yōu)化.如果希望連隱藏的圖片一起加載,則可以把 skip_invisible 設(shè)為 false .