© DenisBunakov.ru 2012 - 2020 Официальный партнер 1С-Битрикс

Можем обсудить все по телефону: +7-923-137-16-27

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

Ленивая загрузка картинок 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-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. Создаем компонент <sc ript> BX.Vue.create({ el: '#components-demo' }); </sc ript>



Денис Бунаков

ТОП20 веб разработчиков по СФО

C 2012 года разрабатываю и поддерживаю сайты на 1С Битрикс. У меня вы можете заказать услуги по разработки или поддержке сайта на битриксе

smm.bunakov@yandex.ru

+7-923-137-16-27

Возврат к списку


Нажимая на кнопку "Отправить", вы даете согласие на обработку персональных данных