是否只有在某些情况下才能添加属性loading =“ lazy”？

问题描述

我正在使用this。我只希望在页面上显示的图像数量超过10时启用它。我正在使用Vue.js v3构建我的网站。我正在用V型卡加载图像，如下所示：

ngrok

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

当照片数量超过10张时，是否可以将loading =“ auto”更改为loading =“ lazy”？

解决方法

好吧，您只需将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>

,

您可以使用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>