利用浏览器IntersectionObserver方法实现懒加载

IntersectionObserver可以动态监听元素是否在当前窗口可视范围内，但不兼容ie，建议大家合理应用

git地址：https://github.com/smileLiMingWei/resource/blob/master/%E5%8A%9F%E8%83%BD/imgLazyLoading.html

懒加载代码截图

let img = document.getElementsByTagName("img")

  //注意：此方法不兼容ie

  //IO是浏览器内置的一个API，可以用它实现监听当前元素是否在视口内

  const observer = new IntersectionObserver((changes) => {

    for (let i = 0,len = changes.length;i<len;i++) {

      let change = changes[i]

      if (change.isIntersecting) {//返回一个布尔值，表示当前是否相交

        const imgElement = change.target

        imgElement.src = imgElement.getAttribute("data-scr");

        observer.unobserve(imgElement);//停止观察此节点

      }

    }

  })

  img = [...img]

  img.forEach(element => {

    observer.observe(element)//observe只能接收一个节点信息

  });