基于上篇文章，我们继续聊聊图片数据的优化过程，本文的核心观点~懒加载。何为懒加载，当你的项目中出现大量图片数据时，一次性加载出来或许需要你等待很久，如果站在用户角度而言，可能已经给你判了死刑，“这么卡，怎么用？”，为了避免这种情况出现，我们想到一个办法，数据阶段性渲染。什么意思呢？答案就是当你的数据出现在用户视角时再进行加载，其余未出现的数据暂时不渲染，对于浏览器而言，工作量减少，性能自然会增强。听起来貌似可行，但是，我又如何才能知道用户何时看到对应页面呢？答案是，当相应元素进入屏幕视窗区域时开始执行：
//获取视窗高度constseeHeight =document.documentElement.clientHeight;//滚动高度（此处以body为例）constscrollTop =document.documentElement.scrollTop ||document.body.scrollTop;既然有了上述二者参数，那我们已经成功了一半，只要元素距离body（滚动的父元素）顶部距离（offsetTop）小于seeHeight +scrollTop就可以断定为进入视窗：
constimages=document.getElementById("img")images.offsetTop<seeHeight+scrollTop
有了思路，我们还需监听滚轮事件
window.addEventListener('scroll', fn(),false);
貌似效果还可以，只是滚轮一直滚动有些影响性能，做个节流处理吧！
functionthrottle(fn, delay, atleast){vartimeout =null,startTime =newDate();returnfunction(){varcurTime =newDate();clearTimeout(timeout);if(curTime - startTime >= atleast) {fn();startTime = curTime;}else{timeout = setTimeout(fn, delay);}}}
效果图如下
完整代码：
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Lazyload 2</title><style>img{width:500px;display: block;margin-bottom:50px;height:500px;}</style></head><body><imgsrc="https://img.zcool.cn/community/01faf35fb354fb11013ee04d64d664.gif"data-src="https://ts1.cn.mm.bing.net/th/id/R-C.c80fcf27df1eb3b63bd8c7f197af29ba?rik=7aPZGU1AGtq1vg&riu=http%3a%2f%2fyouimg1.c-ctrip.com%2ftarget%2f1002090000003p7td5E3D.jpg&ehk=ywDTwNqwgWdKUNXYku8Do%2fbUBl5RQiee671mUANssYI%3d&risl=&pid=ImgRaw&r=0"><imgsrc="https://img.zcool.cn/community/01faf35fb354fb11013ee04d64d664.gif"data-src="https://pic.52112.com/2019/05/27/JPG-190527_810/r6Q7pu4qa0_small.jpg"><imgsrc="https://img.zcool.cn/community/01faf35fb354fb11013ee04d64d664.gif"data-src="https://www.2008php.com/2011_Website_appreciate/2011-10-19/20111019021259.jpg"><imgsrc="https://img.zcool.cn/community/01faf35fb354fb11013ee04d64d664.gif"data-src="https://pic.52112.com/JPG-180515/180515_565/DxZntO2pdv_small.jpg"><imgsrc="https://img.zcool.cn/community/01faf35fb354fb11013ee04d64d664.gif"data-src="https://cn.bing.com/th?id=OHR.EiffelBelow_ZH-CN5149009072_1920x1080.jpg&rf=NorthMale_1920x1080.jpg&pid=hp"><imgsrc="https://img.zcool.cn/community/01faf35fb354fb11013ee04d64d664.gif"data-src="https://ts1.cn.mm.bing.net/th/id/R-C.a435a7a5d3950e0c075a01230c195f43?rik=fX2cb2kPSLfyAg&riu=http%3a%2f%2fp7.qhimg.com%2ft01068da7902d22c4b6.jpg&ehk=mtJ8w9R5b3OntuWK26qVyD%2bpKby6G4fgV9HHQPOX8Ds%3d&risl=&pid=ImgRaw&r=0"><imgsrc="https://img.zcool.cn/community/01faf35fb354fb11013ee04d64d664.gif"data-src="https://ts1.cn.mm.bing.net/th/id/R-C.e3df0fdf3ec848da488f43d9f4401201?rik=2ziuDdOMUfGyNQ&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f60%2f4660.jpg&ehk=P1n8s1NuCnwuXZlLxy%2bSJy3ZaTm7gXJ5UybpWVU8AIA%3d&risl=&pid=ImgRaw&r=0"><imgsrc="https://img.zcool.cn/community/01faf35fb354fb11013ee04d64d664.gif"data-src="https://ts1.cn.mm.bing.net/th/id/R-C.6d0b9996a27a0d13a259703f8d96a725?rik=m3yZ%2bJR7qD9HaQ&riu=http%3a%2f%2foldwww.wtcf.org.cn%2fuploadfile%2f2020%2f1014%2f20201014112959150.jpg&ehk=wUzVTNPbvo%2byciP0lR6UihiWT%2fxkfy6075n0mpiYZV4%3d&risl=&pid=ImgRaw&r=0"><imgsrc="https://img.zcool.cn/community/01faf35fb354fb11013ee04d64d664.gif"data-src="https://ts1.cn.mm.bing.net/th/id/R-C.38addd5d5fe6a0eb7be11d43e84a857a?rik=CwfnWkFRfnpcpA&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50081%2f3071.jpg_wh1200.jpg&ehk=5dzMQQMiCFZ6eX%2bRptGU3HgeyHt4rgZloV9RmjxDBz0%3d&risl=&pid=ImgRaw&r=0"><imgsrc="https://img.zcool.cn/community/01faf35fb354fb11013ee04d64d664.gif"data-src="https://ts1.cn.mm.bing.net/th/id/R-C.b09f4d52feb1b21905bf748d7877a04d?rik=t02F7QW3IgPprA&riu=http%3a%2f%2fpic.ntimg.cn%2ffile%2f20191030%2f26101165_115313547086_2.jpg&ehk=enifXgHyW49qr5HLJOIPCjI3dgCfpL4MsCAbdThcwxU%3d&risl=&pid=ImgRaw&r=0"><imgsrc="https://img.zcool.cn/community/01faf35fb354fb11013ee04d64d664.gif"data-src="https://pic.kuaizhan.com/g3/6d/82/0eaf-86b5-4e89-a1fc-c71eebbe6bb295"><script>functionthrottle(fn, delay, atleast){vartimeout =null,startTime =newDate();returnfunction(){varcurTime =newDate();clearTimeout(timeout);if(curTime - startTime >= atleast) {fn();startTime = curTime;}else{timeout = setTimeout(fn, delay);}}}functionlazyload(){varimages =document.getElementsByTagName('img');varlen = images.length;varn =0;//存储图片加载到的位置，避免每次都从第一张图片开始遍历returnfunction(){varseeHeight =document.documentElement.clientHeight;varscrollTop =document.documentElement.scrollTop ||document.body.scrollTop;for(vari = n; i < len; i++) {if(images[i].offsetTop < seeHeight + scrollTop) {if(images[i].getAttribute('src') ==='https://img.zcool.cn/community/01faf35fb354fb11013ee04d64d664.gif') {images[i].src = images[i].getAttribute('data-src');}n ++}}document.getElementById("img")}}varloadImages = lazyload();loadImages();//初始化首页的页面图片window.addEventListener('scroll', throttle(loadImages,500,1000),false);</script></body></html> 本文采摘于网络，不代表本站立场，转载联系作者并注明出处：https://www.iotsj.com//kuaixun/3056.html
