背景：頁面圖片多，加載的圖片就多。服務器壓力就會很大。不僅影響渲染速度還會浪費帶寬。比如一個1M大小的圖片，並發情況下，達到1000並發，即同時有1000個人訪問，就會產生1個G的帶寬。為了解決以上問題，提高用戶體驗，就出現了懶加載方式來減輕服務器的壓力，優先加載可視區域的內容，其他部分等進入了可視區域再加載，從而提高性能。
1.懶加載原理
一張圖片就是一個<img>標簽，瀏覽器是否發起請求圖片是根據<img>的src屬性，所以實現懶加載的關鍵就是：
在圖片沒有進入可視區域時，先不給<img>的src賦值，這樣瀏覽器就不會發送請求了，等到圖片進入可視區域再給src賦值。
2.懶加載思路及實現
實現懶加載有四個步驟，如下：
1.加載loading圖片
2.判斷哪些圖片要加載【重點】
3.隱形加載圖片
4.替換真圖片
話不多說，代碼滿上:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>懶加載實例</title> </head> <style> .imgList { width: 80%; margin: 0 auto; } .img_item { width: 100%; background: #9999997a; margin: 20px 0; } </style> <body> <div class="imgList"> <img class="img_item" src="./loading.gif" data-src="./category_phone_2.jpg" /> <img class="img_item" src="./loading.gif" data-src="./category_phone_2.jpg" /> <img class="img_item" src="./loading.gif" data-src="./category_phone_2.jpg" /> <img class="img_item" src="./loading.gif" data-src="./category_phone_2.jpg" /> <img class="img_item" src="./loading.gif" data-src="./category_phone_2.jpg" /> <img class="img_item" src="./loading.gif" data-src="./category_phone_2.jpg" /> <img class="img_item" src="./loading.gif" data-src="./category_phone_2.jpg" /> <img class="img_item" src="./loading.gif" data-src="./category_phone_2.jpg" /> <img class="img_item" src="./loading.gif" data-src="./category_phone_2.jpg" /> <img class="img_item" src="./loading.gif" data-src="./category_phone_2.jpg" /> <img class="img_item" src="./loading.gif" data-src="./category_phone_2.jpg" /> <img class="img_item" src="./loading.gif" data-src="./category_phone_2.jpg" /> <img class="img_item" src="./loading.gif" data-src="./category_phone_2.jpg" /> <img class="img_item" src="./loading.gif" data-src="./category_phone_2.jpg" /> </div> </body> <script> // 等到全部資源加載完全再加載 window.onload = function () { // 獲取圖片列表 var imgList = document.getElementsByClassName('imgList')[0].children; //console.log('imgList', imgList); // 滾動觸發函數 window.onscroll = function () { lazyLoad(imgList); }; // 獲取元素到瀏覽器頂部的距離 function getTop(e) { return e.offsetTop; } // 懶加載實現 function lazyLoad(imgs) { var viewHeight = window.innerHeight;//獲取可視高度(屏幕高度) var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;//獲取滾動的值 for (var i = 0; i < imgs.length; i++) { // 如果滾動的大小和屏幕高度之和大於元素到頂部的距離 if ((viewHeight + scrollHeight) > getTop(imgs[i])) { /** * 立即執行函數：定義一個匿名函數，創建了一個新的函數作用域，不會破壞污染全局的命名空間， 此時若是想訪問全局對象，將全局對象以參數形式傳進去即可 * */ (function (i) { /** * setTimeout:設置一個定時器，制造懶加載的延遲加載的效果 * */ setTimeout(function () { var temp = new Image(); temp.src = imgs[i].getAttribute('data-src'); temp.onload = function () { imgs[i].setAttribute('src', temp.src); } }, 1000) })(i) } } } } </script> </html>