原生JS,通过IntersectionObserver内置构造函数实现图片懒加载效果()

<script>
const IMGS = document.querySelectorAll(".currentImg"); // 获取所有图片
const callback = entries => { // 设置构造函数中接收到的参数中的操作事项
  entries.forEach(enntry => { // 因为entries里面放着所有被观察的节点，所有需要遍历判断
      if (enntry.isIntersecting) { // 判断当前节点是否在可视区域能被看到
          const image = enntry.target; // 通过事件对象拿到这个元素
          const data_url = image.getAttribute("data-src"); // 获取该元素data-src中存放的路径
          image.setAttribute("src", data_url); // 赋值给真实路径
          Observer.unobserve(image); // 停止观察
      }
  })
}
const Observer = new IntersectionObserver(callback); // 生成实例
IMGS.forEach(img => Observer.observe(img)) // 通过遍历对所有Img元素都进行观察
</script>