在JQuery中如何利用lazyload.js實現圖片異步延遲加載

計算機技術對社會發展所起的作用是巨大的，它越來越成為未來職場人們的必備技巧，下面就讓我們一起來欣賞這篇關於lazyload.js實現圖片異步延遲加載的文章吧!

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

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

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

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

特效優點：

加速wordpress站點的頁面載入速度;

不唐突的圖片漸顯方式;

代碼精簡，便於操作維護，JS代碼僅僅 1.6KB 先決條件是：你的站加載了 Jquery.js

原理：

這個特效是少有的即華麗又加速的效果，因為它能判斷訪客是不是在查看當前圖片，若非則加載預留的填充圖片 grey.gif ，等到訪客滑動鼠標滑輪或浏覽到圖片位置時，真正的圖片地址才會加載。

也就是說，如果訪客瞬間打開你的頁面，然後瞬間關閉，處於頁腳的圖片是不被加載的，何樂而不為呢?

不用擔心對訪客的友好程度，這個效果會在圖片即將被浏覽到的時候就開始加載圖片;

實現方法：

下載jquery.lazyload.js

下載 預填充圖片fill.gif      點此打包下載 （或者本文後面下載，已經上傳）

將上面2文件，放到您的網站的某個目錄，或者你直接在外站調用。(我是傳到http://www.173it.cn/上調用的)

在當前主題的 header.php 中適當位置添加下面 JS調用代碼，我當期用的inove主題後台就有添加js代碼的地方：

【http://www.173it.cn/js/部分請自定義】

【$("img")部分可以限定對頁面中的哪些img生效】比如修改成 $(".content img")

壓縮包中除了lazyload.js外，還有一個grey.gif圖片文件。這個圖片的作用是，當頁面上圖片未載入時，就顯示這張圖片。將JS文件與圖片傳到你的空間，然後在你主題的header.php文件中加入

以上就是精品為您准備的關於lazyload.js實現圖片異步延遲加載的信息，希望對您的生活工作有幫助。