Дата последнего изменения: 15.01.2019
Директива Image LazyLoad |
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 пикселей). Однако этот метод работает значительно быстрее традиционных способов (отслеживания скролла), и производители браузеров рекомендуют использовать именно его (при его наличии).