有没有办法只在某些条件下添加属性 loading="lazy" ？

Question

我正在使用relativly new HTML attribute loading="lazy"。我只希望在页面上呈现的图像数量超过 10 时启用它。我正在使用 Vue.js v3 构建我的网站。我正在用这样的 v-for 卡加载图像：

    <div
      class="gallery-panel"
      v-for="photo in filteredPhotos"
      v-bind:key="photo.id"
      :class="`${photo.display}`"
    >
      <a @click="this.$router.push(`/Album/${album}/Photo/${photo.id}`)">
        <img
          loading="auto"
          v-bind:src="thumbUrl(photo.filename, album)"
          v-bind:alt="`${photo.filename}`"
        />
      </a>
    </div>

其中 filteredPhotos 是一个包含来自 JSON 文件的图像信息的数组。

当照片数量超过 10 张时，有没有办法将 loading="auto" 更改为 loading="lazy"？

Answer 1

嗯，你可以简单地添加一个 index 属性到你的 v-for 来检查你的数组的长度是否超过 10 （因为索引将从 0 开始您应该将条件设置为 > 9)。然后你可以像这样使你的 loading 属性成为条件：

<img :loading="index > 9 ? 'lazy' : 'auto'" />

所以你的最终代码应该是这样的：

<div class="gallery-panel" v-for="(photo, index) in filteredPhotos" v-bind:key="photo.id" :class="`${photo.display}`">
  <a @click="this.$router.push(`/Album/${album}/Photo/${photo.id}`)">
    <img :loading="index > 9 ? 'lazy' : 'auto'" v-bind:src="thumbUrl(photo.filename, album)" v-bind:alt="`${photo.filename}`" />
  </a>
</div>

Answer 2

您可以使用 index 或 v-for，例如

<div
  class="gallery-panel"
  v-for="(photo, index) in filteredPhotos"
  v-bind:key="photo.id"
  :class="`${photo.display}`"
>
  <a @click="this.$router.push(`/Album/${album}/Photo/${photo.id}`)">
    <img
      :loading="index > 9 ? 'lazy' : 'auto'"
      v-bind:src="thumbUrl(photo.filename, album)"
      v-bind:alt="`${photo.filename}`"
    />
  </a>
</div>

有没有办法只在某些条件下添加属性 loading="lazy" ？

Is there a way to add the attribute loading="lazy" only in certain conditions?

javascript

lazy-loading

vue.js