導讀

提升網頁加載速度的方法有很多種，用 jquery.lazyload.js 實現圖片異步延遲加載，對于頁面包含圖片較多的網站來說，會是個不錯的提升網頁打開速度的方法。代碼君網站欄目頁列表左側，在PC端預覽時能看到一個文章略縮圖展示模塊，一定程度上會延長網頁加載時間。所以袁程旭采用…

提升網頁加載速度的方法有很多種，用 jquery.lazyload.js 實現圖片異步延遲加載，對于頁面包含圖片較多的網站來說，會是個不錯的提升網頁打開速度的方法。代碼君網站欄目頁列表左側，在PC端預覽時能看到一個文章略縮圖展示模塊，一定程度上會延長網頁加載時間。所以袁程旭采用圖片異步延遲加載的方法，來提升本站頁面加載速度。雖然不是什么非常高大上的話題，但也是可以分享的。

圖片異步加載，就是不必一次性把頁面的所有圖片都加載顯示出來，等用戶滑動滾動條到某個位置時才會加載顯示相應位置的圖片，這樣能很好地提升網頁加載速度，進一步提升用戶體驗。

代碼君網站有很多技術性文章的配圖是非常多的，如果打開網頁時要求能夠一次性加載完成所有圖片的話，用戶等候的時間肯定就得非常長了。這種做法會讓用戶體驗非常不好，況且也沒有必要一次性把頁面上的所有圖片都加載出來。圖片異步延遲加載，才是網頁設計中最合理最恰當的做法。

我們用 jquery.lazyload.js 來實現圖片異步延遲加載，記得要先載入 jQuery 才行。

1、導入 JS 插件：

2、在頁面中插入 JavaScript 代碼：

$(document).ready(function($){
$(“img”).lazyload({
placeholder:”grey.gif”, //加載圖片前的占位圖片
effect:”fadeIn” //加載圖片使用的效果(淡入)
});
});

通過以上兩步，就能簡單實現網頁圖片異步延時加載了?；ヂ摼W上有很多關于圖片異步延時加載的介紹性文章，覺得本文說得不夠全面的，可另行查閱其他文章或者直接來咨詢袁程旭。下周本人將寫文章談幾點關于如何提升網頁加載速度的技巧，屆時我會從編碼、設計、優化等多方面出發，結合平常工作學習經驗，系統分析寫文探討這個話題，然后分享給大家。

本文所涉及的 jquery.lazyload.js 文件和 grey.gif 圖片，已打包上傳，需要的朋友們可直接點擊下方鏈接下載。鑒于 jquery.js 這個文件幾乎每個網站都有引用，所以沒有包含在下載文件中。

福德麟管理咨詢福德麟管理咨詢http://www.qdfoodlin.com
認證咨詢服務認證咨詢服務http://www.qdfoodlin.com
神秘顧客服務神秘顧客服務http://www.qdfoodlin.com
青島管理咨詢服務青島管理咨詢服務http://www.qdfoodlin.com
青島安全風險評價青島安全風險評價http://www.qdfoodlin.com
青島食品安全風險評價青島食品安全風險評價http://www.qdfoodlin.com
池州公墓池州公墓http://www.czlxsgm.com
液壓壩液壓壩http://ahyhhdb.com
銅陵裝修公司銅陵裝修公司http://www.ahchuangyi.cn
淘寶優惠券淘寶優惠券http://www.waquan666.com
無錫網站建設無錫網站建設http://www.nanjingqiao.com
食堂外包食堂外包http://www.shhkcy.com/
六安婚紗攝影http://www.suhanphoto.com/
無錫網站建設公司無錫沐鹿網絡科技有限公司(www.nanjingqiao.com)是一家專注于企業網站建設，響應式網站建設，網站優化，網站設計，網站制作，微信公眾號開發，微信小程序開發等。網站建設咨詢熱線15050695302 / qq1309844028 ——無錫網站建設，無錫網站制作，無錫網站設計，無錫公眾號開發，無錫微信小程序開發。