原理与概述
概述：如网页中需要加载N张图片，为了提升用户体验，减少用户的等待时间，兼顾加载性能。只加载当前视口的图片（也称作一屏），其余图片等用户向下滑动的时候再进行加载（滚动条向下滚动的时候）。
原理：获取用户设备当前高度，循环图片，获取其距离顶部的距离，处在第一屏的图片先加载，当滚动条发生滚动，继续加载。
html 实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> img { display: block; margin-bottom: 50px; width: 400px; height: 400px; } </style> </head> <body> <img src="./img2/timg.gif" data-src="./img2/time.jpg" /> <img src="./img2/timg.gif" data-src="./img2/time2.jpg" /> <img src="./img2/timg.gif" data-src="./img2/time3.jpg" /> <img src="./img2/timg.gif" data-src="./img2/time4.jpg" /> <img src="./img2/timg.gif" data-src="./img2/time5.jpg" /> <img src="./img2/timg.gif" data-src="./img2/time6.jpg" /> <img src="./img2/timg.gif" data-src="./img2/time7.jpg" /> <img src="./img2/timg.gif" data-src="./img2/time8.jpg" /> <img src="./img2/timg.gif" data-src="./img2/time9.jpg" /> </body> </html>
data-src : 这里存放的是图片的真实地址，等用户滚动条发生滚动，用元素中的 data-src 里的值替换 默认值src 便可。
js 实现
<script> // 获取图片标签的长度 let num = document.getElementsByTagName("img").length; // 获取所有图片标签 let img = document.getElementsByTagName("img"); // 计数器，防止每次遍历都从第一张图片开始 let n = 0; // 调用一次 lazyload(); // 绑定window的滚动事件 window.onscroll = lazyload; function lazyload(){ // 可见区域高度 let seeHeight = document.documentElement.clientHeight; // 滚动条距离顶部的高度 let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; for(let i = n; i < num; i++){ // 当图片距离顶部的距离小于视口高度+ 滚动距离（页面发生了滚动） if(img[i].offsetTop < seeHeight + scrollTop){ if(img[i].getAttribute("src") == "./img2/timg.gif"){ // 替换src img[i].src = img[i].getAttribute("data-src"); } // 计数器赋值 n = i + 1; } } } </script>
