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

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

lazyload.js其實是jQuery的一個插件，全稱是jquery.lazyload.js，看它的名字就知道它的作用了——就是偷懶載入的意思。由于它是javascript寫的，所以適用于所有網(wǎng)頁，包括Wordpress。

想要使用lazyload，得先載入jQuery，它是依靠jQuery來實現(xiàn)效果的。至于jQuery，大家不用去下載了，可以直接連接存放在Google服務器上的jQuery文件，永遠不用擔心丟失（當然，如果有天朝完全屏蔽Google的那一天的話……）

特效優(yōu)點：

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

原理：

這個特效是少有的即華麗又加速的效果，因為它能判斷訪客是不是在查看當前圖片，若非則加載預留的填充圖片 grey.gif ，等到訪客滑動鼠標滑輪或瀏覽到圖片位置時，真正的圖片地址才會加載。
也就是說，如果訪客瞬間打開你的頁面，然后瞬間關閉，處于頁腳的圖片是不被加載的，何樂而不為呢？
不用擔心對訪客的友好程度，這個效果會在圖片即將被瀏覽到的時候就開始加載圖片;

實現(xiàn)方法：

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

壓縮包中除了lazyload.js外，還有一個grey.gif圖片文件。這個圖片的作用是，當頁面上圖片未載入時，就顯示這張圖片。將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" //加載圖片使用的效果(淡入)
});
});

轉自：http://www.oschina.net/code/snippet_111193_3306

總結

以上是生活随笔為你收集整理的lazyload.js实现图片异步延迟加载的全部內容，希望文章能夠幫你解決所遇到的問題。

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