js實現網頁圖片延時加載提升網頁打開速度_javascript技巧

來源：懂視網責編：小采時間：2020-11-27 21:49:24

js實現網頁圖片延時加載提升網頁打開速度_javascript技巧

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

推薦度：

點擊下載本文 文檔為doc格式

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

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

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

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

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

1、導入 JS 插件：

再為大家具體介紹一下：
有時我們看到一些大型網站，頁面如果有很多圖片的時候，當你滾動到相應的行時，當前行的圖片才即時加載的，這樣子的話頁面在打開只加可視區域的圖片，而其它隱藏的圖片則不加載，一定程序上加快了頁面加載的速度，對于比較長的頁面來說，這個方案是比較好的。

推薦：使用jquery圖片延遲加載插件jquery.lazyload實現圖片延遲

實現原理：

把所有需要延時加載的圖片改成如下的格式：

然后在頁面加載時，把所有使用了lazy_src的圖片都保存到數組里，然后在滾動時計算可視區域的top，然后把延時加載的圖片中top小于當前可視區域（即圖片出現在可視區域內）的圖片的src的值用lazy_src的來替換（加載圖片）：

JS代碼：

使用方法：把頁面上需要延時加載的圖片src改成為lazy_src，然后把上面的js放到body最后面，然后調用：lazyLoad.init();
調戲的方法可以使用firebug來查看一時圖片是否是延時加載。
另外：
如果你的頁面上存在有內容切換的欄目的話，可能在切換時切換的內容里的圖片可能會不顯示，處理的方法是在內容時單獨圖片加載處理，如：

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

看看你有沒有這種需求：某篇文章圖片很多，如果在載入文章時就載入所有圖片，無疑會延緩載入速度，讓用戶等更久，所以，我想找這樣一種插件，讓網頁只加載瀏覽器視野范圍內的圖片，沒出現在范圍內的圖片就暫不加載，等用戶滑動滾動條時再逐步加載，lazyload就是用來實現這種效果。
lazyload.js其實是jQuery的一個插件，全稱是jquery.lazyload.js，看它的名字就知道它的作用了——就是偷懶載入的意思。由于它是javascript寫的，所以適用于所有網頁，包括Wordpress。

想要使用lazyload，得先載入jQuery，它是依靠jQuery來實現效果的。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com