Фоновая загрузка изображений vue lazyload на 1С-Битриксе

Моя цель - предложение широкого ассортимента товаров и услуг на постоянно высоком качестве обслуживания по самым выгодным ценам.

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-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>

Интересные статьи

Интересные статьи

Кто бы что ни говорил, но я считаю, что изобретение велосипедов — штука полезная. Использование готовых библиотек и фреймворков, конечно, хорошо, но порой стоит их отложить и создать ...
Вам приходилось сталкиваться с ситуацией, когда сайт или портал Битрикс24 недоступен, потому что на диске неожиданно закончилось место? Да, последний бэкап съел все место на диске в самый неподходящий...
В 2019 году люди знакомятся с брендом, выбирают и, что самое главное, ПОКУПАЮТ через интернет. Сегодня практически у любого бизнеса есть свой сайт — от личных блогов, зарабатывающих на рекламе, до инт...
Если вы последние лет десять следите за обновлениями «коробочной версии» Битрикса (не 24), то давно уже заметили, что обновляется только модуль магазина и его окружение. Все остальные модули как ...
В Челябинске проходят митапы системных администраторов Sysadminka, и на последнем из них я делал доклад о нашем решении для работы приложений на 1С-Битрикс в Kubernetes. Битрикс, Kubernetes, Сep...