根據需求，先來捋一下大致思路：
1.將所有圖片的src設置為懶加載動畫圖片的路徑；
2.圖片真實路徑通過data-src保存在相應的img標簽上；
3.判斷圖片是否在可視窗口內；
4.如果圖片可見，就將圖片的src設置為保存在data-src中的值；
先看效果圖：
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>圖片懶加載</title> <style> * { margin: 0; padding: 0; } html { height: 100%; } .container { width: 100vw; max-width: 640px; margin: 0 auto; } .container img { width: 100%; height: 400px; } </style> </head> <body> <div class="container"> <img class="lazy-img" src="./src/loading.gif" data-src="./src/1.jpg" alt="加載失敗"> <img class="lazy-img" src="./src/loading.gif" data-src="./src/2.jpg" alt="加載失敗"> <img class="lazy-img" src="./src/loading.gif" data-src="./src/3.jpg" alt="加載失敗"> <img class="lazy-img" src="./src/loading.gif" data-src="./src/4.jpg" alt="加載失敗"> <img class="lazy-img" src="./src/loading.gif" data-src="./src/5.jpg" alt="加載失敗"> <img class="lazy-img" src="./src/loading.gif" data-src="./src/6.jpg" alt="加載失敗"> <img class="lazy-img" src="./src/loading.gif" data-src="./src/7.jpg" alt="加載失敗"> <img class="lazy-img" src="./src/loading.gif" data-src="./src/8.jpg" alt="加載失敗"> <img class="lazy-img" src="./src/loading.gif" data-src="./src/9.jpg" alt="加載失敗"> <img class="lazy-img" src="./src/loading.gif" data-src="./src/10.jpg" alt="加載失敗"> </div> </body> <script> /* 思路：1.將所有圖片的路徑設置為懶加載圖片，真實圖片路徑通過data-XXX存儲起來； 2.判斷圖片是否可見，如果可見，將圖片的路徑設置為真實路徑； 2.1 獲取可見視口的高度； 2.2 獲取圖片距離可視窗口頂部的距離； 2.3 獲取瀏覽器滾動條的高度； 2.4 判斷圖片是否可見； 2.5 設置圖片路徑； */ window.onload = function () { var imgs = document.getElementsByClassName('lazy-img'); // 加載首屏的圖片 lazyLoad(imgs); // 窗口滾動時，觸發懶加載函數 window.onscroll = function () { lazyLoad(imgs); } } function lazyLoad(images) { // 2.1 獲取可視窗口的高度 var viewHeight = window.innerHeight; // 2.3 獲取瀏覽器滾動條的高度（也就是內容向上滾動了多高） var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset; for (var i = 0; i < images.length; i++) { // 這里使用立即執行函數，支持ES6的環境可以直接使用let i = 0，具體原因可自行百度立即執行函數 (function (i) { // 2.2 獲取圖片距離視圖窗口頂部的距離 var imageToTop = images[i].offsetTop; // 2.4 判斷圖片是否可見，如果圖片距可視窗口頂部的距離小於可視窗口的高度與滾動條高度之和，則該圖片可見 if (imageToTop - viewHeight - scrollTop < 0) { // 制造圖片延遲加載的動畫效果 setTimeout(function () { // 2.5 設置圖片路徑 // 獲取真實圖片的路徑 var realSrc = images[i].getAttribute('data-src'); // 設置圖片的路徑 images[i].setAttribute('src', realSrc); }, 500) } })(i) } } </script> </html>