基于是否在可视区域实现图片懒加载示例

先将图片的src设置为空，将url放在data-imgurl属性中，通过判断图片是否在可视区域，改变图片的src，从而实现图片的懒加载效果。（只是一个思路，现实情况还要考虑更多因素）

 <div class="container">
   <div class="card">
     <img src="" data-imgurl="./balloons1.jpg" alt="a single red balloon">
   </div>
   <div class="card">
     <img src="" data-imgurl="./balloons2.jpg" alt="balloons over some houses">
   </div>
   <div class="card">
     <img src="" data-imgurl="./balloons3.jpg" alt="close-up of balloons inflating">
   </div>
   <div class="card">
     <img src="" data-imgurl="./balloons4.jpg" alt="a balloon in the sun">
   </div>
 </div>

 var imgs = document.querySelectorAll("img");
 watchpic(imgs);
 window.onscroll=function(){
   watchpic(imgs)
 }
 //可视区函数
 function isInViewPort(element) {
   const viewWidth = window.innerWidth || document.documentElement.clientWidth;
   const viewHeight = window.innerHeight || document.documentElement.clientHeight;
   const {top, right,bottom,left} = element.getBoundingClientRect();
   return (
     top >= 0 &&
     left >= 0 &&
     right <= viewWidth &&
     bottom <= viewHeight
   );
 }
 function watchpic(arr){
   var result = null;
   for(let i = 0 ; i < arr.length; i++){
     if(isInViewPort(arr[i])){
       setTimeout(function(){
         arr[i].src = arr[i].dataset.imgurl;
         arr[i].style.cssText = "transition: 0.4s; opacity: 1;" ;
       },500)
     }else{
       arr[i].src=""
     }
   }
 }

这里可以用于少量图片懒加载使用。对于大量图片，建议使用预下载的方式实现。