C помощью директивы v-bx-lazyload можно сделать "ленивую подгрузку изображений" в рамках ваших компонентов.

Имя расширения для зависимости

ui.vue.directives.lazyload

Доступно с ui 18.5.0.

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

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

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

Примеры

В свойстве src (placeholder) указывается путь до плейсхолдера (т.е. до легкого изображения, которое будет показано во время загрузки основного изображения или если оно скрыто).

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

В свойстве data-lazyload-error-src указывается путь до изображения, которое требуется показать в случае, когда основное изображение не удалось загрузить. Если это поле не указать, то у изображения останется placeholder src:

<img v-bx-lazyload
	class="bx-module-element"
	src="https://.../placeholder.png"
	data-lazyload-src="https://.../targetImage.png"
	data-lazyload-error-src="https://.../errorImage.png"
/>

По умолчанию, при показе и скрытии изображения из поля видимости, изображение заменяется обратно на placeholder. Если такое поведение не требуется - укажите свойство data-lazyload-dont-hide:

<img v-bx-lazyload
	class="bx-module-element"
	src="https://.../placeholder.png"
	data-lazyload-dont-hide
	data-lazyload-src="https://.../targetImage.png"
	data-lazyload-error-src="https://.../errorImage.png"
/>

Также можно использовать краткую версию синтаксиса, не указывая placeholder src и error src. Тогда при возникновении ошибки или скрытия изображения из поля видимости будет использовано изображение размером 1х1 пиксель.

Для работы в таком режиме обязательно должны быть указаны размеры изображения через стили.

<img v-bx-lazyload
	class="bx-module-element"
	data-lazyload-src="https://.../targetImage.png"
/>

Во время работы директивы на элемент будут автоматически проставляться разные классы:

bx-lazyload-watch - класс означает что изображение отслеживает изменения состояния

bx-lazyload-loading - класс означает что изображение в стадии загрузки

bx-lazyload-success - класс означает что изображение успешно загрузилось

bx-lazyload-error - класс означает что при загрузки изображения возникла ошибка

bx-lazyload-hidden - класс означает что изображение в данный момент скрыто

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

Для классов успешной загрузки и ошибки возможно переопределить стандартные названия на свои. Для этого используются следующие свойства:

data-lazyload-error-class - название класса при возникновении ошибки

data-lazyload-success-class - название класса при успешной загрузке

<img v-bx-lazyload
	class="bx-module-element"
	data-lazyload-src="https://.../targetImage.png"
	data-lazyload-error-class="bx-module-element-error"
	data-lazyload-success-class="bx-module-element-success"
/>

Особенности работы

Данный компонент работает на основе IntersectionObserver Intersection Observer API позволяет веб-приложениям асинхронно следить за изменением пересечения элемента с его родителем или областью видимости документа viewport.

Подробнее... инновационной технологии, которая позволяет отслеживать показ и скрытие элементов DOM.

В параметрах этого метода нельзя указать отступы, которые нужно учитывать для срабатывания факта видимости (например, начать загружать изображение в тот момент, когда до него осталось 100 пикселей). Однако этот метод работает значительно быстрее традиционных способов (отслеживания скролла), и производители браузеров рекомендуют использовать именно его (при его наличии).