Фоновая загрузка изображений 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>

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

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

Как-то у нас исторически сложилось, что Менеджеры сидят в Битрикс КП, а Разработчики в Jira. Менеджеры привыкли ставить и решать задачи через КП, Разработчики — через Джиру.
Приветствую вас (лично вас, а не всех кто это читает)! Сегодня мы: Создадим приложение (навык) Алисы с использованием нового (октябрь 2019) сервиса Yandex Cloud Functions. Настроим н...
Этот пост будет из серии, об инструментах безопасности, которые доступны в Битриксе сразу «из коробки». Перечислю их все, скажу какой инструмент в какой редакции Битрикса доступен, кратко и не очень р...
Как обновить ядро 1С-Битрикс без единой секунды простоя и с гарантией работоспособности платформы? Если вы не можете закрыть сайт на техобслуживание, и не хотите экстренно разворачивать сайт из бэкапа...
Сегодня мы поговорим о перспективах становления Битрикс-разработчика и об этапах этого пути. Статья не претендует на абсолютную истину, но даёт жизненные ориентиры.