如何在 NuxtJs 中延迟加载 html 标签

Question

我是 Nuxtjs 的新手。 我正在制作名为 photos 的页面，它显示了很多 DOM，因为我获取照片的 api 不提供分页查询（页面，限制）。 目前它返回包含 5000 张照片的数据。

为了性能，我想找到一个方法来仅渲染在视口中可见的 html 个标签。 其他 html 标签应该延迟渲染，直到用户向下滚动。 我试过 nuxt-lazy-load 但是这个 package 只延迟加载图像，它仍然渲染所有 html 标签。

我非常感谢所有的建议。 谢谢你。

我使用 Nuxt 2.15.8，Vue 2.7.10。

<template>
  <div>
    <h1>Page Photos</h1>
    <div v-if="photos.length > 0">
      <div v-for="(photo, index) in photos" :key="photo.id"> **(I want to lazy render this element until user scroll down to here)**
        <h5>{{ `${index + 1}. ${photo.title}` }}</h5> 
        <img
          :alt="photo.title"
          :src="photo.url"
          width="600"
          height="600"
        />
        <br />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData(context) {
    try {
      const response = await fetch(context.$constants.photosApi).then((r) =>
        r.json()
      );
      return {
        photos: response || [],
      };
    } catch (error) {
      console.log("error", error);
      return {
        photos: [],
      };
    }
  },
};
</script>

Answer 1

vue-virtual-scroller就是你要找的。
它将在 DOM 中呈现，仅呈现在当前视口中可见的元素（您可以通过检查 DOM 并查看没有比您看到的元素更多的元素来仔细检查）。

至于图像的延迟加载，这里你go： https://stackoverflow.com/a/72232543/8816585
您当然可以完全混合这两种技术。