：JS-圖片懶加載(LazyLoad)學習前端技術不得不提的——圖片懶加載(LazyLoad)
在互聯網的快車道上，網頁加載速度就像是一場與時間的賽跑，而圖片作為裝點頁面的重頭戲，卻常常因為其龐大的體積成為拖慢速度的“減速帶”。這不，圖片懶加載這位“加速小能手”應運而生，它如同一位智慧的調度員，讓圖片在最恰當的時刻才閃亮登場，大大提升了網頁的首屏加載速度，讓用戶體驗飛一般的感覺。下面，咱們就來聊聊圖片懶加載的那些事兒，看看它是怎樣施展魔法的。
圖片懶加載的魔力所在
想象一下，你打開一個網頁，還沒等你往下翻，所有圖片一股腦兒全涌進來，這不僅讓加載速度慢如蝸牛，還可能消耗用戶寶貴的流量。而圖片懶加載的出現，就是為了解決這些問題。它巧妙地讓瀏覽器先加載屏幕內可見區域的圖片，至于那些還在屏幕外“待命”的圖片，就先晾著，等到用戶滾動頁面，圖片即將進入視線時，才迅速加載。這樣一來，不僅首屏加載速度快如閃電，還幫用戶省了流量，真是一舉兩得！
瀏覽器加載的幕后故事
在揭秘懶加載之前，咱們得先了解下瀏覽器加載頁面的“劇本”。首先，瀏覽器讀取HTML，搭起DOM這棟大樓的框架；接著，CSS和JavaScript這些裝飾工上陣，把頁面打扮得漂漂亮亮；最后，圖片等“大塊頭”才開始下載。要是圖片太多，網絡通道就會堵得水泄不通，頁面加載自然就慢下來了。
那么，如何讓圖片乖乖聽話，該出手時才出手呢？別急，咱們一步步來。
1. HTML結構的小變動
首先，給圖片標簽動個小手術，把原本的src屬性換成data-src。這樣，圖片就不會一上來就被加載了。比如這樣：
html復制代碼<img data-src="美圖.jpg" alt="美麗風景">
2. 監聽滾動，火眼金睛辨位置
接著，我們需要寫一段JavaScript，讓它像偵探一樣監聽頁面的滾動。每當用戶滾動，就檢查圖片是否接近或已經進入了可視區域。為了防止偵探過度熱情（頻繁觸發事件），我們可以用“防抖”或“節流”技巧來控制頻率。用Lodash的throttle函數是個不錯的選擇：
javascript復制代碼window.addEventListener('scroll', _.throttle(checkImages, 200));
3. 動態加載，適時露面
當偵探發現目標圖片已進入“射程”，就讓圖片正式登臺亮相。怎么做呢？很簡單，把data-src里的地址轉移到src屬性上，圖片就乖乖加載了：
javascript復制代碼function checkImages() { // ...判斷邏輯... img.src = img.dataset.src; img.onload = function() { // 圖片加載完成后的處理 }; img.removeAttribute('data-src'); }
4. 優化加載邏輯，避免過度渲染
別忘了，圖片加載完后，最好把它從監聽列表里移除，避免重復加載，浪費資源。另外，如果所有需要懶加載的圖片都加載完畢，也可以考慮停止監聽滾動事件，進一步優化性能。
代碼實戰演練
好了，理論說了一大堆，實踐才是檢驗真理的唯一標準。下面是一個簡單的懶加載實現示例可供參考：
html復制代碼<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./common.css"> <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script> </head> <body> <img data-price="20" data-src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1oc3eu.img?w=640&h=400&m=6"/> <img data-src="https://img.36krcdn.com/20190808/v2_1565254363234_img_jpg"> <img data-src="https://img.36krcdn.com/20190905/v2_1567641293753_img_png"> <img data-src="https://img.36krcdn.com/20190905/v2_1567640518658_img_png"> <img data-src="https://img.36krcdn.com/20190905/v2_1567642423719_img_000"> <img data-src="https://img.36krcdn.com/20190905/v2_1567642425030_img_000"> <img data-src="https://img.36krcdn.com/20190905/v2_1567642425101_img_000"> <img data-src="https://img.36krcdn.com/20190905/v2_1567642425061_img_000"> <img data-src="https://img.36krcdn.com/20190904/v2_1567591358070_img_jpg"> <img data-src="https://img.36krcdn.com/20190905/v2_1567641974410_img_000"> <img data-src="https://img.36krcdn.com/20190905/v2_1567641974454_img_000"> <script> const imgs = document.getElementsByTagName('img'); const num = imgs.length; let n = 0; document.addEventListener('DOMContentLoaded', () => { loadImage(); }) function loadImage() { // console.log('haha') // 是否在可視區？ let screenHeight = document.documentElement.clientHeight;// 一屏高度 // 滾動條 // 不同瀏覽器的兼容性問題 let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; for(let i = 0; i < num; i++) { // console.log(imgs[i].offsetTop); if (imgs[i].offsetTop < screenHeight + scrollTop) { // 數據屬性 // console.log(imgs[i].dataset.src, imgs[i].dataset.price) imgs[i].src = imgs[i].getAttribute('data-src'); n = i + 1; if(n === num) { // console.log('所有圖片加載完畢'); window.removeEventListener('scroll', throttledLayLoad); } } } } const throttledLayLoad = _.throttle(loadImage, 300) window.addEventListener('scroll', throttledLayLoad); </script> </body> </html>
這段代碼中，我們先選中所有帶有data-src屬性的圖片，然后在頁面加載完成后和滾動時檢查圖片位置，一旦符合條件就加載圖片，整個過程流暢而高效。
尾聲
通過圖片懶加載，我們不僅優化了網頁的加載速度，還提升了用戶體驗，尤其是在移動設備上，更是省時省流量的利器。當然，如果你不想從零開始編碼，市面上也有一些成熟的庫，如Lozad.js，它們封裝好了懶加載的邏輯，讓你的開發工作事半功倍。總之，圖片懶加載是提升網頁性能的必備技能，學會它，讓你的網頁加載如絲般順滑，讓用戶愛不釋手！
該文章在 2024/6/17 9:41:09 編輯過
400 186 1886
