前端性能优化之自己封装图片懒加载组件

总所周知，项目性能优化是一个比较重要的事儿。其中懒加载占很大一部分。主要有图片懒加载、路由懒加载、组件懒加载等。
图片懒加载可以说是首屏优化中比较常用的。大家也知道有一些组件库会有专门做懒加载的功能。但是你知道懒加载到底是咋实现的吗？
今天咱们就来整理一下它的实现原理以及怎么自己封装一个可以实现图片懒加载功能的组件。
首先，他是通过判断图片到可视区域的距离来做判断。如果到达了可视区域，就可以加载图片，如果没到可视区域，就不加载。
接下来就实现一下基本的图片懒加载的功能。它主要是利用了一个叫做InterdectionObserver 的方法。这是一个原生的方法，所以不管你用哪个框架，都可以放心使用。
话不多说，上代码！

// 必不可少的  img 标签
<image  src="url"  />

首先，获取DOM元素。

var img = document.querySelector("img")

2、new 一个 InterdectionObserver

// 两个参数，第一个是一个回调函数，第二个是一个配置项
var observer = new IntersectionObserver((arr)=>{
   
     // arr[0].isIntersecting  ===> 是否进入可视区域
     // arr[0].intersectionRatio ===> 进入可视区域的范围
    // 进行条件判断：
    if(arr[0].isIntersecting) {
   
       img.src = img.getAttribute('data-src')}
     // onerror 事件，用于检查图片是否有效
      img.onerror = function(