提升網(wǎng)頁加載速度的方法有很多種，用 jquery.lazyload.js 實現(xiàn)圖片異步延遲加載，對于頁面包含圖片較多的網(wǎng)站來說，會是個不錯的提升網(wǎng)頁打開速度的方法。代碼君網(wǎng)站欄目頁列表左側(cè)，在PC端預(yù)覽時能看到一個文章略縮圖展示模塊，一定程度上會延長網(wǎng)頁加載時間。所以袁程旭采用…
提升網(wǎng)頁加載速度的方法有很多種，用 jquery.lazyload.js 實現(xiàn)圖片異步延遲加載，對于頁面包含圖片較多的網(wǎng)站來說，會是個不錯的提升網(wǎng)頁打開速度的方法。代碼君網(wǎng)站欄目頁列表左側(cè)，在PC端預(yù)覽時能看到一個文章略縮圖展示模塊，一定程度上會延長網(wǎng)頁加載時間。所以袁程旭采用圖片異步延遲加載的方法，來提升本站頁面加載速度。雖然不是什么非常高大上的話題，但也是可以分享的。
圖片異步加載，就是不必一次性把頁面的所有圖片都加載顯示出來，等用戶滑動滾動條到某個位置時才會加載顯示相應(yīng)位置的圖片，這樣能很好地提升網(wǎng)頁加載速度，進(jìn)一步提升用戶體驗。
代碼君網(wǎng)站有很多技術(shù)性文章的配圖是非常多的，如果打開網(wǎng)頁時要求能夠一次性加載完成所有圖片的話，用戶等候的時間肯定就得非常長了。這種做法會讓用戶體驗非常不好，況且也沒有必要一次性把頁面上的所有圖片都加載出來。圖片異步延遲加載，才是網(wǎng)頁設(shè)計中最合理最恰當(dāng)?shù)淖龇ā?
我們用 jquery.lazyload.js 來實現(xiàn)圖片異步延遲加載，記得要先載入 jQuery 才行。
1、導(dǎo)入 JS 插件：
2、在頁面中插入 JavaScript 代碼：
$(document).ready(function($){
$(“img”).lazyload({
placeholder:”grey.gif”, //加載圖片前的占位圖片
effect:”fadeIn” //加載圖片使用的效果(淡入)
});
});
通過以上兩步，就能簡單實現(xiàn)網(wǎng)頁圖片異步延時加載了。互聯(lián)網(wǎng)上有很多關(guān)于圖片異步延時加載的介紹性文章，覺得本文說得不夠全面的，可另行查閱其他文章或者直接來咨詢袁程旭。下周本人將寫文章談幾點關(guān)于如何提升網(wǎng)頁加載速度的技巧，屆時我會從編碼、設(shè)計、優(yōu)化等多方面出發(fā)，結(jié)合平常工作學(xué)習(xí)經(jīng)驗，系統(tǒng)分析寫文探討這個話題，然后分享給大家。
本文所涉及的 jquery.lazyload.js 文件和 grey.gif 圖片，已打包上傳，需要的朋友們可直接點擊下方鏈接下載。鑒于 jquery.js 這個文件幾乎每個網(wǎng)站都有引用，所以沒有包含在下載文件中。
福德麟管理咨詢福德麟管理咨詢http://www.qdfoodlin.com
咨詢電話
15050695302
13771112364
咨詢QQ
1309844028