Ленивая загрузка изображений

Ленивая загрузка (lazy loading) — это техника оптимизации загрузки веб-страниц, при которой изображения загружаются только тогда, когда они становятся видимыми пользователю в области просмотра (viewport). В Quasar эта функциональность встроена и может быть реализована с минимальными усилиями с использованием компонента <q-img> и директивы v-lazy.

Использование компонента <q-img>

Компонент <q-img> является центральным элементом для работы с изображениями в Quasar. Он поддерживает ленивую загрузку из коробки через атрибут lazy-src и проп lazy. Пример базового использования:

<q-img
  src="images/high-res.jpg"
  lazy-src="images/low-res.jpg"
  spinner-color="primary"
  :ratio="16/9"
/>

Пояснения:

  • src — основной URL изображения высокого качества.
  • lazy-src — URL изображения низкого разрешения, которое отображается до полной загрузки.
  • spinner-color — цвет индикатора загрузки.
  • ratio — соотношение сторон, чтобы предотвратить скачки верстки при подгрузке изображения.

Директива v-lazy

Quasar предоставляет директиву v-lazy, которая может использоваться с любыми тегами <img> или даже <div> с фоновым изображением. Это особенно удобно, когда требуется кастомное поведение или использование сторонних компонентов.

Пример использования:

<img v-lazy="'images/photo.jpg'" alt="Пример ленивой загрузки">

Для фонового изображения через <div>:

<div v-lazy:background-image="'images/photo-bg.jpg'" class="lazy-bg"></div>

Особенности:

  • Директива автоматически отслеживает появление элемента в viewport.
  • Поддерживается несколько модификаторов для настройки поведения: background-image, opacity, transition.

Настройка эффектов при загрузке

Компонент <q-img> позволяет добавлять плавные эффекты появления, что улучшает пользовательский опыт. Наиболее часто используются:

  • transition-show — анимация появления изображения.
  • transition-hide — анимация исчезновения (например, при смене изображений).

Пример:

<q-img
  src="images/high-res.jpg"
  lazy-src="images/low-res.jpg"
  transition-show="fade"
  transition-hide="fade"
/>

Quasar предлагает встроенные анимации: fade, scale, slide-down, slide-up и другие. Для более сложной кастомизации можно использовать CSS-переходы.

Паттерн низкого разрешения (LQIP)

Техника LQIP (Low-Quality Image Placeholder) подразумевает предварительную загрузку маленького, размытого изображения перед основной версией. В Quasar она легко реализуется через lazy-src:

<q-img
  src="images/high-res.jpg"
  lazy-src="images/low-res-blur.jpg"
  :ratio="4/3"
/>
  • Рекомендуется использовать размытие (blur) для lazy-src, чтобы улучшить визуальный эффект.
  • После загрузки высокого разрешения Quasar автоматически заменяет placeholder.

Поддержка сетей и адаптивных изображений

Компонент <q-img> совместим с современными практиками адаптивной загрузки:

<q-img
  srcset="images/photo-480.jpg 480w, images/photo-768.jpg 768w, images/photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 960px) 768px, 1200px"
  lazy-src="images/photo-low.jpg"
  :ratio="16/9"
/>
  • srcset — определяет различные версии изображения для разных разрешений экранов.
  • sizes — указывает размер изображения в зависимости от ширины контейнера.
  • lazy-src — placeholder до полной загрузки.

Такой подход позволяет экономить трафик на мобильных устройствах и ускоряет первичное отображение страницы.

Оптимизация производительности

Для больших страниц с множеством изображений важно контролировать количество одновременно подгружаемых ресурсов:

  • Использовать v-lazy с компонентами, которые появляются только при скролле.
  • Настраивать кэширование изображений на сервере.
  • Минимизировать размер lazy-src для ускоренной загрузки.
  • Объединять изображения в спрайты, если они декоративные и маленькие.

Пример интеграции в список элементов

<template>
  <q-list>
    <q-item v-for="item in items" :key="item.id">
      <q-item-section>
        <q-img
          :src="item.highRes"
          :lazy-src="item.lowRes"
          spinner-color="accent"
          :ratio="1"
        />
      </q-item-section>
      <q-item-section>{{ item.title }}</q-item-section>
    </q-item>
  </q-list>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, title: 'Изображение 1', highRes: 'img/high1.jpg', lowRes: 'img/low1.jpg' },
        { id: 2, title: 'Изображение 2', highRes: 'img/high2.jpg', lowRes: 'img/low2.jpg' },
        // ...
      ]
    }
  }
}
</script>

В этом примере каждый элемент списка получает собственное ленивое изображение, что снижает нагрузку на сеть и ускоряет рендеринг списка.

Важные советы по использованию

  • Указывать соотношение сторон (ratio) для предотвращения «скачков» контента.
  • Использовать маленькие размазанные изображения для lazy-src, чтобы улучшить UX.
  • Для фоновых изображений применять v-lazy:background-image с соответствующим CSS классом.
  • Комбинировать ленивую загрузку с адаптивными изображениями (srcset) для оптимизации под мобильные устройства.

Эти практики позволяют создавать быстрые и отзывчивые интерфейсы с большим количеством графического контента, минимизируя потребление трафика и задержки при рендеринге страницы.

Оглавление