js如何实现图片的懒加载

提到前端性能优化中图片资源的优化，懒加载和预加载就不得不提，下面说下懒加载和预加载的核心要点以及实现

1.懒加载

懒加载的要点如下：

1.图片进入可是区域之后请求图片资源

2.对于电商等图片较多，页面很长的业务场景很适用

3.可以减少无效资源的加载

4.并发加载的资源过多会阻塞js的加载， 影响网站的正常使用

如何实现懒加载呢？要点就是给html中的ing标签的src属性为空，给一个data-original属性，里面存放图片的真实地址，在需要的时候动态的将data-original地址赋值给img的src属性

如下所示

        <img src="" class="image-item" lazyload="true" data-original="" />

 类似上述代码所示，当需要时间，用js脚本控制图片的加载

var viewHeight = document.documentElement.clientHeight  //可视区域的高度

function lazyload(){
     //获取所有要进行懒加载的图片
    const lazyloadImg = document.querySelectorAll('img[data-original][lazyload]')
    lazyloadImg.forEach(item  => {
         let rect = item.getBoundingClientRect()//获取每一个img元素的宽高以及距离视口顶部的距离
         if(rect.top <= viewHeight && rect.top > -rect.height){
                item.src = item.dataset.original
                item.removeAttribute('data-original')
                item.removeAttribute('lazyload')  
     }  
  })
}

document.addEventListener('scroll',lazyload)