不足:当我一直滚动鼠标的时候，lazyload函数就会不断被延迟，这样只有停下来的时候才会执行，那么再有些需要及时显示的情况下，就显得不那么友好了
2、节流原理：预设一个执行周期，如果这个周期结束了都还没有触发函数，那就会执行一次函数；如果这个周期还没有结束就触发函数，那定时器将重置，开始新周期。
达到了想要的效果，既没有频繁的执行也没有延迟执行
五、运用节流函数的图片懒加载代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> img { display: block; margin-bottom: 50px; width: 800px; height: 400px; } </style> </head> <body> <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg6.png" alt=""> <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg7.png" alt=""> <img src="" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt=""> <img src="" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t" alt=""> <img src="" data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg" alt=""> <img src="" data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg" alt=""> <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg9.png" alt=""> <img src="" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t" alt=""> <img src="" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt=""> <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg8.png" alt=""> <img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""> <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg9.png" alt=""> <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg10.png" alt=""> <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg11.png" alt=""> <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg15.png" alt=""> <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg16.png" alt=""> <img src="" data-src="https://www.mwcxs.top/static/staticImage/sliders/bg17.png" alt=""> <script> (function(){ let num = document.getElementsByTagName('img').length; let img = document.getElementsByTagName("img"); let n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历 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") == "") { img[i].src = img[i].getAttribute("data-src"); } n = i + 1; } } } //采用了节流函数 function throttle(fun, delay, time) { let timeout, startTime = new Date(); return function() { let context = this, args = arguments, curTime = new Date(); clearTimeout(timeout); // 如果达到了规定的触发时间间隔，触发 handler if (curTime - startTime >= time) { fun.apply(context, args); startTime = curTime; // 没达到触发间隔，重新设定定时器 } else { timeout = setTimeout(fun, delay); } }; }; window.addEventListener('scroll',throttle(lazyload,500,1000)); })() </script> </body> </html>