Добавить в корзинуПозвонить
Найти в Дзене

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

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

#lazyload

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-dont-hide - картинка не будет скрываться после скролинга страницы

src - путь до прелоадера

<div id="components-demo">

<img v-bx-lazyload

data-lazyload-dont-hide

data-lazyload-src="/upload/iblock/250/learning.png"

data-lazyload-error-src="/images/px.png"

src="/images/px.png"

alt="Разработчик Bitrix Framework"

/>

</div>

4. Создаем компонент

<script> BX.Vue.create({ el: '#components-demo' }); </script>