lazyload.js实现图片异步延迟加载
所謂圖片異步加載，意思是不用一次把圖片全部加載完，你可以叫它延遲加載，緩沖加載都行。
看看你有沒(méi)有這種需求：某篇文章圖片很多，如果在載入文章時(shí)就載入所有圖片，無(wú)疑會(huì)延緩載入速度，讓用戶(hù)等更久，所以，我想找這樣一種插件，讓網(wǎng)頁(yè)只加載瀏覽器視野范圍內(nèi)的圖片，沒(méi)出現(xiàn)在范圍內(nèi)的圖片就暫不加載，等用戶(hù)滑動(dòng)滾動(dòng)條時(shí)再逐步加載。lazyload就是用來(lái)實(shí)現(xiàn)這種效果。
lazyload.js其實(shí)是jQuery的一個(gè)插件，全稱(chēng)是jquery.lazyload.js，看它的名字就知道它的作用了——就是偷懶載入的意思。由于它是javascript寫(xiě)的，所以適用于所有網(wǎng)頁(yè)，包括Wordpress。
想要使用lazyload，得先載入jQuery，它是依靠jQuery來(lái)實(shí)現(xiàn)效果的。至于jQuery，大家不用去下載了，可以直接連接存放在Google服務(wù)器上的jQuery文件，永遠(yuǎn)不用擔(dān)心丟失（當(dāng)然，如果有天朝完全屏蔽Google的那一天的話(huà)……）
特效優(yōu)點(diǎn)：
原理：
這個(gè)特效是少有的即華麗又加速的效果，因?yàn)樗芘袛嘣L(fǎng)客是不是在查看當(dāng)前圖片，若非則加載預(yù)留的填充圖片 grey.gif ，等到訪(fǎng)客滑動(dòng)鼠標(biāo)滑輪或?yàn)g覽到圖片位置時(shí)，真正的圖片地址才會(huì)加載。
也就是說(shuō)，如果訪(fǎng)客瞬間打開(kāi)你的頁(yè)面，然后瞬間關(guān)閉，處于頁(yè)腳的圖片是不被加載的，何樂(lè)而不為呢？
不用擔(dān)心對(duì)訪(fǎng)客的友好程度，這個(gè)效果會(huì)在圖片即將被瀏覽到的時(shí)候就開(kāi)始加載圖片;
實(shí)現(xiàn)方法：
壓縮包中除了lazyload.js外，還有一個(gè)grey.gif圖片文件。這個(gè)圖片的作用是，當(dāng)頁(yè)面上圖片未載入時(shí)，就顯示這張圖片。將JS文件與圖片傳到你的空間，然后在你主題的header.php文件中加入
jQuery(document).ready(
function($){
$("img").lazyload({
placeholder : "<span class="Apple-style-span" style="font-family:'sans serif', tahoma, verdana, helvetica;line-height:19px;white-space:normal;font-size:13px;">http://www.173it.cn/css/grey.gif", //加載圖片前的占位圖片
effect : "fadeIn" //加載圖片使用的效果(淡入)
});
});
轉(zhuǎn)自：http://www.oschina.net/code/snippet_111193_3306
總結(jié)
以上是生活随笔為你收集整理的lazyload.js实现图片异步延迟加载的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
