图片懒加载实现

为什么要实现懒加载？

原因：懒加载是一种网页性能优化的方式，它能极大的提升用户体验。现在图片清晰度越来越好，图片也越来也大，假使我搜图的时候服务器返回成百上千的图片，等浏览器加载完成可能需要的时间是难以把控的，而且用户只能对着转圈圈的网页抓狂。所以，我们需要懒加载，进入页面的时候，只请求可视区域的图片资源，等待用户进一步的操作的时候再去加载后面的图片。

实现方法：

1、监听 scroll 事件判断元素是否进入视口

//将获取到的数据塞到data-src中，等带滚动到当前窗口时候赋给src属性渲染展示
    <img data-src="/img/001.png" src="/" alt="xxx" />
    <img data-src="/img/002.png" src="/" alt="xxx" />
    <img data-src="/img/003.png" src="/" alt="xxx" />

 //获取全部img标签
 var images = document.getElementsByTagName("img");

 window.addEventListener("scroll", (e) => {
    //当发生滚动事件时调用loadImg事件
    loadImg();
  });
  function loadImg() {
    // 遍历每一张图
    for (let i of images) {
      /*getBoundingClientRect().top 为元素相对于窗口的位置；window.innerHeight 为当前窗口的高度；
      当元素对于窗口的位置小于当前窗口的高度时，那自然处于了窗口可视区了。*/
      if (i.getBoundingClientRect().top < window.innerHeight) {
          //获取自定义data-src属性的值
          let trueSrc = i.getAttribute("data-src");
          //把值赋值给图片的src属性
          i.setAttribute("src", trueSrc);
      }
    }
  }
  //进入页面时候先执行一次
  loadImg();
	

2、IntersectionObserver

Intersection Observer API提供了一种异步观察目标元素与祖先元素或顶级文档viewport的交集中的变化的方法。
创建一个 IntersectionObserver对象，并传入相应参数和回调用函数，该回调函数将会在目标(target)元素和根(root)元素的交集大小超过阈值(threshold)规定的大小时候被执行。

   var observer = new IntersectionObserver(callback, options);
   
   //获取页面上img标签集合
   var images = document.getElementsByTagName("img");
   //定义回调函数
   function callback(entries) {
    for (let i of entries) {
      //如果当前元素出现在窗口
      if (i.isIntersecting) {
          let img = i.target;
          //将图片地址给到src属性
          let trueSrc = img.getAttribute("data-src");
          img.setAttribute("src", trueSrc);
          //取消对当前元素的的观察
          observer.unobserve(img);
      }
    } 
  }
  
  //对图片循环添加观察
  for (let i of images) {
     observer.observe(i);
  }