【原生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;
    }
  }
 }