1、HTML5自定义属性data-前缀，data-固定写法 data-namename自定义，如下面的data-src（ dataset ） 先将img标签的src链接设为同一张图片（比如空白图片），然后给img标签设置自定义属性（比如 data-src）,然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。达到懒加载的效果。
<div id="box"> <ul> <li> <img data-src="./图片懒加载/1.jpg" alt=""> </li> <li> <img data-src="./图片懒加载/2.jpg" alt=""> </li> <li> <img data-src="./图片懒加载/3.jpg" alt=""> </li> </div> 判断条件 window.innerHeight可以获取到这个窗口的高度(不包括工具栏和滚动条)。getBoundingClientRect()方法用来获取页面中某个元素的左、上、右、下分别相对浏览器视窗的位置，返回的是一个矩形对象，包括四个属性，分别是left 、top、right、bottom。分别表示元素各边与页面上边和左边的距离。 基本的判断就是如果该图片距离窗口上方的位置小于窗口的高度（也就是说该图片已经进入了窗口），那么就将该图片的src属性赋为data-src找那个存的图片路径。 然后全局绑定scroll事件，在滚动页面的时候，图片进入到窗口后，500ms之后才会显示出图片。 <script> function imgonload() { let img = document.querySelectorAll("img"); /*console.log(img);*/ for(let i=0; i<img.length; i++) { if(img[i].getBoundingClientRect().top < window.innerHeight) { //图片一旦有src就会加载出来，所以图片的路径不会放在src中，而是一个自定义的属性data-src中 img[i].src = img[i].dataset.src; } } } //防抖函数 function scollImg(fn) { let timer = null; let context = this; return function () { clearTimeout(timer); timer = setTimeout(() => { fn.apply(context); }, 500) } } window.onload = imgonload; window.onscroll = scollImg(imgonload); </script>