根据需求，先来捋一下大致思路：
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>