IntersectionObserver 图片懒加载方法

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>

IntersectionObserver 图片懒加载方法_第1张图片

你可能感兴趣的:(功能配置,javascript,前端,vue.js)