图片懒加载（图片延迟加载）：当图片不在浏览器可视区域中时（即我们此时看不见图片），我们可以先不请求图片资源，当图片出现在浏览器可视区域中时再加载资源。
实现思路
1.结构中，我们用一个盒子包裹着图片（在图片不展示的时候，可以占据着这个位置，并且设置默认的背景图或者背景颜色）
2.最开始，img的src中不设置任何的图片地址，把图片的真实地址设置给自定义属性true-img（最开始不展示图片:可以让图片隐藏）
3.当浏览器窗口完全展示到图片位置的时候，我们再去加载真实图片，并且让其显示出来（第一屏幕中的图片一般都会延迟加载，来等待其它资源先加载完）
单张图片懒加载
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>* {padding: 0;margin: 0;}html,body {width: 100%;height: 100%;}#box {width: 300px;height: 200px;margin: 800px auto;}img {width: 100%;height: 100%;}</style></head><body><div id="box"><img src="img/default.jpg" true-img="img/1.jpg" alt=""></div></body></html><script src="utils.js"></script><script>var box=document.getElementById('box');var img=document.getElementsByTagName("img")[0];function check(){//滚动条一滚动就触发window.onscroll，为了避免重复加载图片，给img加一个flag属性，成功加载图片后将其值设为trueif(img.flag){return;}let boxH=box.offsetHeight;//当前图片盒子的总高度let boxT=utils.offset(box).top;//获取当前图片盒子距离body的上偏移量let winH=utils.win('clientHeight');//获取当前浏览器的可视区域的高度（一屏高）let winT=utils.win('scrollTop');//获取当前浏览器滚动条的卷曲的高度//图片盒子下边框与浏览器可视区域的下边框重合时，图片完全显示//早一些显示图片：winH+winT >= boxTif(winH+winT >= boxH+boxT){let trueImg=img.getAttribute("true-img");//let newImg=document.createElement('img');//创建一个img标签let newImg=new Image;//动态创建一个img标签用来检测当前图片的真实路径是否有效newImg.arc=trueImg;//把真实的路径给检测的img去请求//如果请求到了图片，onload才会执行（如果当前路径是正确的，那onload对应的函数就会执行）newImg.onload=function(){img.src=trueImg;img.flag=true;fadeIn(img);//渐入}//如果请求失败，onerror执行（如果当前路径是错误的，那onerror对应的函数就会执行）newImg.onerror=function(){//可以给当前图片附一张默认的加载错误图片img.src='img/10.jpg';img.flag=true;}}function fadeIn(img){img.style.opacity=0.01;let opacity=Number(img.style.opacity);let timer=setInterval(()=>{opacity+=0.01;img.style.opacity=opacity;if(opacity>=1){clearInterval(timer);}},17);}}window.onscroll=check;</script>
多张图片懒加载
<head><style>* {padding: 0;margin: 0;}div {margin: 500px auto;width: 300px;}img {display: block;margin: auto;width: 300px;height: 200px;margin-bottom: 10px;}</style></head><body><div><img src="./img/default.jpg" trueImg = "./img/1.jpg" alt=""><img src="./img/default.jpg" trueImg = "./img/2.jpg" alt=""><img src="./img/default.jpg" trueImg = "./img/3.jpg" alt=""><img src="./img/default.jpg" trueImg = "./img/4.jpg" alt=""><img src="./img/default.jpg" trueImg = "./img/5.jpg" alt=""><img src="./img/default.jpg" trueImg = "./img/6.jpg" alt=""></div><script src="utils.js"></script><!-- <script src="">//如果写了src，内部所有代码都会失效</script> --><script>var imgs=document.getElementsByClassName("bg");//具有映射关系let winH = utils.win('clientHeight'); // 当前屏幕的高度（浏览器可视区域高度）// 此方法每执行一次，就会把每一个图片都判断一下要不要显示function dealy(){//当函数执行的时候，循环每一张图片，然后判断每一张图片是否需要加载for (var i = 0; i < imgs.length; i++) {dealyImg(imgs[i])}}function dealyImg (img){/* if(img.flag){return;} */let curH = img.offsetHeight; // 图片的自身高度let curT = utils.offset(img).top; // 图片相对于body的上偏移量let winT = utils.win('scrollTop'); // 浏览器滚动条卷去的高度if(winH+winT >= curH+curT){let address = img.getAttribute('trueImg');let newImg = new Image;newImg.src = address;newImg.onload = function(){img.src = address;// img.flag=true;img.className="";newImg = null;fadeIn(img);}}}function fadeIn(img) {img.style.opacity = 0.05;let cur = parseFloat(img.style.opacity);let timer = setInterval(function () {cur += 0.05;img.style.opacity = cur;if (cur >= 1) {clearInterval(timer)}}, 50)};dealy(); // 页面初始化的时候，要把第一屏的图片展示出来window.onscroll = dealy;</script>
utils.js
let utils=(function(){/* 获取盒子距离body的偏移量 */function offset(ele) {let left = ele.offsetLeft;let top = ele.offsetTop;let parent = ele.offsetParent;while (parent !== document.body) {left += parent.offsetLeft + parent.clientLeft;top += parent.offsetTop + parent.clientTop;parent = parent.offsetParent;}return {left,top}}/* 设置或者获取浏览器的某些属性 */function win(attr,value){if(value==undefined){return document.documentElement[attr] || document.body[attr];}document.documentElement[attr]=value;document.body[attr]=value;}return {offset,win}})();
