我是Nuxtjs的新手。我正在制作一个名为照片的页面，它显示了很多DOM，因为我获取照片的API不提供分页查询（页面，限制）。目前它返回的数据包含5000张照片。
为了提高性能，我想找到一种方法来只渲染视口中可见的html标签。其他html标签应该是惰性渲染，直到用户向下滚动。我已经尝试了nuxt-lazy-load，但这个包只惰性加载图像，它仍然渲染所有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>