【原生js案例】如何让你的网页实现图片的按需加载

按需加载，这个词应该都不陌生了。我用到你的时候，你才出现就可以了。对于一个很多图片的网站，按需加载图片是优化网站性能的一个关键点。减少无效的http请求，提升网站加载速度。

感兴趣的可以关注下我的系列课程【webApp之h5端实战】，里面有大量的css3动画效果制作原生知识分析，讲解，该系列还在不断更新中。

实现效果

带loading效果
完整版效果

在可视区域外的图片还显示的是loading图片
在这里插入图片描述
当图片进入到可视区域的时候，就替换成了对应真实的图片。
请添加图片描述

代码实现

<ul id="ul1"><li><img _src="./images/1.jpg" alt="" srcset="" src="./images/9.gif"></li> <li><img _src="./images/2.jpg" alt="" src="./images/9.gif"></li> <li><img _src="./images/3.jpg" alt="" src="./images/9.gif"></li> <li><img _src="./images/4.jpg" alt="" src="./images/9.gif"></li> <li><img _src="./images/5.jpg" alt="" src="./images/9.gif"></li> <li><img _src="./images/6.jpg" alt="" src="./images/9.gif"></li> <li><img _src="./images/7.jpg" alt="" src="./images/9.gif"></li><li><img _src="./images/1.jpg" alt="" srcset="" src="./images/9.gif"></li> <li><img _src="./images/2.jpg" alt="" src="./images/9.gif"></li> <li><img _src="./images/3.jpg" alt="" src="./images/9.gif"></li> <li><img _src="./images/4.jpg" alt="" src="./images/9.gif"></li> <li><img _src="./images/5.jpg" alt="" src="./images/9.gif"></li> <li><img _src="./images/6.jpg" alt="" src="./images/9.gif"></li> <li><img _src="./images/7.jpg" alt="" src="./images/9.gif"></li></ul>

UI页面美化

*{margin: 0;padding: 0;}ul{list-style: none;}li{width: 300px;height: 250px;float: left;margin: 10px 0 0 10px;}img{width: 100%;height: 100%;}

核心js脚本

var oUl = document.getElementById('ul1');var aImg = oUl.getElementsByTagName('img');showImage()function showImage(){const sTop = document.documentElement.scrollTop || document.body.scrollTop;for(var i=0;i<aImg.length;i++){if(getTop(aImg[i]) < sTop + document.documentElement.clientHeight && !aImg[i].isLoad){aImg[i].src = aImg[i].getAttribute('_src');aImg[i].isLoad = true;}}}