STL－－容器string、vector、deque
阿新 • • 發佈：2022-03-30
目錄
loading 有兩個屬性值 eager:預設,影象立即載入，lazy:圖片延遲載入。
示例：
介紹
懶載入是一種網頁效能優化的方式，能極大的提升使用者的體驗，圖片一直是影響網頁效能的主要因素，現在一張清晰的圖片動則幾M是很正常的事情了。如果每次進入頁面就請求所有的圖片資源，那麼可能等圖片加載出來使用者早就離開了。所以我們需要對圖片進行懶載入，進入頁面的時候只對可視區域的圖片進行資源請求。
多圖片網頁不使用懶載入的話就會造成以下兩個問題：
- 全部載入圖片影響使用者體驗
- 浪費使用者流量，網頁中其實有些內容使用者其實並不想看完。
HTML實現方式
懶載入最簡單的實現方式就是給img標籤加上loading="lazy"<img src="./img.png" loading="lazy">
loading 有兩個屬性值 eager:預設,影象立即載入，lazy:圖片延遲載入。
示例：
從圖中圖片資源載入的順序來看lazy是起作用了，改變了原有img資源載入的順序。這個時候可能就會有人問，這種方式還是浪費了使用者流量，所有圖片資源都載入了。所以有了下面這種方式
JS實現方式
我們可以通過js監聽頁面的滾動來進行實現比上面的方式更好。
使用js來處理的原理是判斷當前圖片是否到了可視區域：
- 拿到所有圖片的dom
- 遍歷每個圖片判斷當前圖片是否到了可視區域的範圍內。
- 到了就是設定src的值。
- 使用window.scroll對事件進行監聽
實現程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .img-box { display: flex; justify-content: center; align-items: center; flex-direction: column; } .img-box img { display: block; height: 300px; width: auto; margin-bottom: 20px; } </style> </head> <body> <div class="img-box" id="imgBox"> <img src="./images/zw.jpg" data-src="./images/bg1.jpg" alt=""> <img src="./images/zw.jpg" data-src="./images/bg2.jpg" alt=""> <img src="./images/zw.jpg" data-src="./images/bg3.jpg" alt=""> <img src="./images/zw.jpg" data-src="./images/bg4.jpg" alt=""> <img src="./images/zw.jpg" data-src="./images/bg5.jpg" alt=""> <img src="./images/zw.jpg" data-src="./images/bg6.jpg" alt=""> <img src="./images/zw.jpg" data-src="./images/bg7.jpg" alt=""> <img src="./images/zw.jpg" data-src="./images/bg8.jpg" alt=""> <img src="./images/zw.jpg" data-src="./images/bg9.jpg" alt=""> <img src="./images/zw.jpg" data-src="./images/bg10.jpg" alt=""> <img src="./images/zw.jpg" data-src="./images/bg11.jpg" alt=""> <img src="./images/zw.jpg" data-src="./images/bg12.jpg" alt=""> <img src="./images/zw.jpg" data-src="./images/bg13.jpg" alt=""> <img src="./images/zw.jpg" data-src="./images/bg14.jpg" alt=""> <img src="./images/zw.jpg" data-src="./images/bg15.jpg" alt=""> <img src="./images/zw.jpg" data-src="./images/bg16.jpg" alt=""> <img src="./images/zw.jpg" data-src="./images/bg17.jpg" alt=""> <img src="./images/zw.jpg" data-src="./images/bg18.jpg" alt=""> </div> </body> <script> function lazyLoadImg() { let portHeight = window.screen.availHeight; // 可視區域高度 let imgList = document.querySelectorAll('img[data-src]'); // 獲取所有需要懶載入的圖片 imgList.forEach((imgItem, index) => { if (imgItem.dataset.src === "") { return false; } let imgCurrent = imgItem.getBoundingClientRect(); if (imgCurrent.bottom >= 0 && imgCurrent.top < portHeight) { imgItem.src = imgItem.dataset.src; imgItem.removeAttribute('data-src'); } }) } lazyLoadImg(); window.addEventListener('scroll', lazyLoadImg); </script> </html>
效果圖：
線上地址：圖片懶載入示例