IntersectionObserver 图片懒加载方法

Sam young

已于 2023-03-23 16:00:35 修改

阅读量320

点赞数

分类专栏：功能配置文章标签： javascript 前端 vue.js

于 2023-03-23 15:59:55 首次发布

本文链接：https://blog.csdn.net/young_sam/article/details/129732870

版权

功能配置专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<header>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />

  <style>
    .warpper {
      overflow: auto;
    }

    .image {
      height: 44vh;
      margin:50px;
      display: block;
    }
  </style>
</header>

<body>
  <div class="warpper">

  </div>
</body>

<script>
  const dom = document.querySelector('.warpper')
  const listIds = []
for (let i = 0; i < 10; i++) {
    /** 动态创建img标签 使用随机图片api */
    const img = document.createElement('img')
    img.setAttribute('src-data', `https://api.yimian.xyz/img?i=${i}`)
    img.className = 'image'
    dom.appendChild(img)
  }



  let observer = new IntersectionObserver((entries,{
    root: dom,
  }) => {
    entries.forEach(entry => {
      // 被观察者进入视口
      console.log(entry)
      if (entry.intersectionRatio > 0) {
        const src = entry.target.getAttribute('src-data')
        if(src) {
          entry.target.setAttribute('src',src)
        }
        observer.unobserve(entry.target)
      }
    });
  })

  /** 设置图片显示观察 */
 const imageList =  dom.querySelectorAll('.image')
 imageList.forEach((item)=>{
  observer.observe(item)
 })





</script>

</html>