關於圖片img的Lazyload

時間 2020-06-28

標籤關於圖片 img lazyload 欄目 HTML 简体版

原文原文鏈接

定義：延遲加載也稱爲惰性加載，即在長網頁中延遲加載圖像。用戶滾動到它們以前，視口外的圖像不會加載。這與圖像預加載相反，在長網頁上使用延遲加載將使網頁加載更快。在某些狀況下，它還能夠幫助減小服務器負載。html

舉個例子來講明，當打開淘寶首頁的時候，只有在瀏覽器窗口裏的圖片纔會被加載，當你滾動首頁向下滑的時候，進入視口內的圖片纔會被加載，而其它從未進入視口的圖像不會也不會加載。瀏覽器

那麼延遲加載有什麼好處：服務器

首先它能提高用戶的體驗，試想一下，若是打開頁面的時候就將頁面上全部的圖片所有獲取加載，若是圖片數量較大，對於用戶來講簡直就是災難，會出現卡頓現象，影響用戶體驗。
有選擇性地請求圖片，這樣能明顯減小了服務器的壓力和流量，也可以減少瀏覽器的負擔。

那麼下面就介紹延遲加載的三種實現方式：閉包

第一種：spa

首先將頁面上的圖片的 src 屬性設爲 loading.gif，而圖片的真實路徑則設置在 data-src 屬性中，頁面滾動的時候計算圖片的位置與滾動的位置，當圖片出如今瀏覽器視口內時，將圖片的 src 屬性設置爲 data-src 的值，這樣，就能夠實現延遲加載。code

下面是具體的實現代碼：htm

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Lazyload 1</title> <style> img { display: block; margin-bottom: 50px; height: 200px; } </style> </head> <body> <img src="images/loading.gif" data-src="images/1.png"> <img src="images/loading.gif" data-src="images/2.png"> <img src="images/loading.gif" data-src="images/3.png"> <img src="images/loading.gif" data-src="images/4.png"> <img src="images/loading.gif" data-src="images/5.png"> <img src="images/loading.gif" data-src="images/6.png"> <img src="images/loading.gif" data-src="images/7.png"> <img src="images/loading.gif" data-src="images/8.png"> <img src="images/loading.gif" data-src="images/9.png"> <img src="images/loading.gif" data-src="images/10.png"> <img src="images/loading.gif" data-src="images/11.png"> <img src="images/loading.gif" data-src="images/12.png"> <script> function lazyload() { var images = document.getElementsByTagName('img'); var len = images.length; var n = 0; //存儲圖片加載到的位置，避免每次都從第一張圖片開始遍歷 return function() { var seeHeight = document.documentElement.clientHeight; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; for(var i = n; i < len; i++) { if(images[i].offsetTop < seeHeight + scrollTop) { if(images[i].getAttribute('src') === 'images/loading.gif') { images[i].src = images[i].getAttribute('data-src'); } n = n + 1; } } } } var loadImages = lazyload(); loadImages(); //初始化首頁的頁面圖片 window.addEventListener('scroll', loadImages, false); </script> </body> </html>