2025-04-14
IntersectionObserver（可视区域dom）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
    <div id="app">
      <ul class="container">
        <li v-for="(item,index) in  80000" ::key="key">
          {{index}}
          <div class="imgbox">
            <img
              src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/69354fd5358d4c27b5e26ca00edb716c~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp?"
            />
          </div>
        </li>
      </ul>
    </div>
    <script>
      const app = {}
      Vue.createApp(app).mount('#app')

      const container = document.querySelector('.container')
      const items = Array.from(container.children) || []
      console.log('items:', items)
      items.forEach(item => {
        const intersectionObserver = new IntersectionObserver(
          function (entries) {
            console.log('entries:', entries)
            // 如果不可见，就返回
            if (!entries[0].isVisible) {
              entries[0].target.backup =
                entries[0].target.innerHTML || entries[0].target.backup
              entries[0].target.innerHTML = ''
              return
            }

            // 在可视区域
            entries[0].target.innerHTML =
              entries[0].target.backup || entries[0].target.innerHTML
          },
          {
            threshold: [0, 1],
            /* required options*/
            trackVisibility: true,
            delay: 100
          }
        )
        // 开始观察
        intersectionObserver.observe(item)
      })
    </script>

    <style>
      .container {
        overflow-y: scroll;
      }
      .imgbox {
        width: 200px;
      }
      img {
        width: 100%;
      }
    </style>
  </body>
</html>
上次更新: 2025-12-04