所謂圖片異步加載，意思是不用一次把圖片全部加載完，你可以叫它延遲加載，緩沖加載都行。

看看你有沒(méi)有這種需求：某篇文章圖片很多，如果在載入文章時(shí)就載入所有圖片，無(wú)疑會(huì)延緩載入速度，讓用戶等更久，所以，我想找這樣一種插件，讓網(wǎng)頁(yè)只加載瀏覽器視野范圍內(nèi)的圖片，沒(méi)出現(xiàn)在范圍內(nèi)的圖片就暫不加載，等用戶滑動(dòng)滾動(dòng)條時(shí)再逐步加載。lazyload就是用來(lái)實(shí)現(xiàn)這種效果。

lazyload.js其實(shí)是jQuery的一個(gè)插件，全稱是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的那一天的話……）

特效優(yōu)點(diǎn)：

1. 加速wordpress站點(diǎn)的頁(yè)面載入速度；
2. 不唐突的圖片漸顯方式；
3. 代碼精簡(jiǎn)，便于操作維護(hù)，JS代碼僅僅 1.6KB 先決條件是：你的站加載了 Jquery.js

原理：

這個(gè)特效是少有的即華麗又加速的效果，因?yàn)樗芘袛嘣L客是不是在查看當(dāng)前圖片，若非則加載預(yù)留的填充圖片 grey.gif ，等到訪客滑動(dòng)鼠標(biāo)滑輪或?yàn)g覽到圖片位置時(shí)，真正的圖片地址才會(huì)加載。
也就是說(shuō)，如果訪客瞬間打開(kāi)你的頁(yè)面，然后瞬間關(guān)閉，處于頁(yè)腳的圖片是不被加載的，何樂(lè)而不為呢？
不用擔(dān)心對(duì)訪客的友好程度，這個(gè)效果會(huì)在圖片即將被瀏覽到的時(shí)候就開(kāi)始加載圖片;

實(shí)現(xiàn)方法：

1. 下載 jquery.lazyload.js
   ???? 下載 預(yù)填充圖片 fill.gif
   ??? 點(diǎn)此打包下載 （或者本文后面下載，已經(jīng)上傳）
   
2. 將上面2文件，放到您的網(wǎng)站的某個(gè)目錄，或者你直接在外站調(diào)用。（我是傳到http://www.173it.cn/上調(diào)用的）
3. 在當(dāng)前主題的 header.php 中適當(dāng)位置添加下面 JS調(diào)用代碼，我當(dāng)期用的inove主題后臺(tái)就有添加js代碼的地方：
   【http://www.173it.cn/js/部分請(qǐng)自定義】
   【$("img")部分可以限定對(duì)頁(yè)面中的哪些img生效】比如修改成 $(".content img")

壓縮包中除了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)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。