Фоновая загрузка картинок vue lazyload на битриксе

VUE.JS - это javascript фрэймворк, с версии 18.5 его добавили в ядро битрикса, поэтому можно его использовать из коробки.
Фоновая загрузка актуальна, когда на странице есть тяжелые фото и нужно ускорить загрузку, для этого сначала подгружают картинки прелоадеры(это могут быть пережатые легкие версии основных картинок), а после загрузки, отображают основные изображения.

Примеров реализации фоновой загрузки много, на разных фрэймворках. Реализация на vue.js интересна, т.к реактивное программирование динамично развивается и с помощью него можно получить большую производительность. Рассмотрим, как это реализуется технически на vue.js:

1. Подключаем vue
\Bitrix\Main\UI\Extension::load("ui.vue");

2. Подключаем расширение lazyload
\Bitrix\Main\UI\Extension::load("ui.vue.directives.lazyload");

3. Устанавливаем в html:
id="components-demo" - идентификатор элемента
v-bx-lazyload - директиву
data-lazyload-src - путь до основного изображения
data-lazyload-error-src - путь до изображения, если не удалось загрузить основное
data-lazyload-hidden - картинка не будет скрываться после скролинга страницы
src - путь до прелоадера
<div id="components-demo">
<img v-bx-lazyload data-lazyload-hidden data-lazyload-src="/upload/iblock/250/learning.png" data-lazyload-error-src="/images/px.png" src="/images/px.png" alt="Разработчик Bitrix Framework" />
</div>

4. Создаем компонент <sc ript> BX.Vue.create({ el: '#components-demo' }); </sc ript>