Блог

Я использую относительно новый атрибут HTML loading=»ленивый». Я хочу, чтобы он был включен только тогда, когда количество изображений, отображаемых на странице, превышает 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.

Есть ли способ изменить loading=»auto» на loading =»lazy», когда количество фотографий будет больше 10?

Ну, вы можете просто добавить 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 of 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>