js 图片懒加载最好的方法

图片懒加载多种方法

第一种 是循环遍历img属性，判断每一个img离顶部的高度减去屏幕的高度是否大于0，小于0的话就就出现在屏幕上了，我们就更改属性显示图片，这种有弊端，因为是监听滚动条，相等于实时监听，消耗性能，不建议使用

第二种 IntersectionObserver 方式，建议使用这种方式，监听属性是否与可视区域交叉，交叉了就显示，如果已经显示过了，可以设置卸载监听

 <!-- 省略多个div -->
  <div>这是内容</div>
  <img
    data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F23%2Ff7%2F09%2F23f709d01c0e46f786b7e3c452f313d5.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652581121&t=9f948907a9bae69fd180f093bc996609">
  <img
    data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.daimg.com%2Fuploads%2Fallimg%2F150404%2F1-1504041A920.jpg&refer=http%3A%2F%2Fimg.daimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652581121&t=c32bdc07b7e00c7d8e1e549b274a6645">
  <img
    data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F021620115230%2F200216115230-9-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652581121&t=7118acb93585280c8b0092bb38b82012">
  <div></div>
 <!-- 省略多个div -->

  <script>
    var imgs = document.querySelectorAll('img')  //获取img
    
    const callback = entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) { //entry.isIntersecting 值为 true 说明交叉了 
          const img = entry.target
          const data_src = img.getAttribute('data-src') //获取自定义属性
          img.setAttribute('src', data_src) // 设置src属性
          console.log('图片显示了');
          observe.unobserve(img)  //已经显示过了，就卸载监听
        }
      })
    }

    const observe = new IntersectionObserver(callback)  //实例化IntersectionObserver

    imgs.forEach(img => {
      observe.observe(img)  //监听 img 是否交叉
    })
  </script>

效果： 我们可以看到多次滚动只打印了三次结果 三张图片