Телеграм: @bazarow_ru Почта: mihail@bazarow.ru

Ленивая подгрузка картинок в компоненте, на vue js Битрикс

Просмотров: 10347

Если на одну страницу сайта выводится большое количество картинок, которые могут долго подгружаться- либо нужно попасть в зеленую зону Google Page Speed. Можно воспользоваться директивой Image LazyLoad - ленивая подгрузка картинок. Картинки подгружаются по мере прокрутки страницы, вместо попытки загрузить все сразу.

Подключаем vue и необходимую зависимость

Библиотека Vue входит в состав Битрикс, и подключается вызовом \Bitrix\Main\UI\Extension::load("ui.vue"). После подключения можно пользоваться всеми возможностями VUE.js

Для иcпользования Image LazyLoad, в нужном компоненте или в шаблоне сайта подключаем директиву \Bitrix\Main\UI\Extension::load("ui.vue.directives.lazyload");

Используем LazyLoad

Покажу на примере своего портфолио, здесь вполне уместно использовать ленивую подгрузку. Но она актуальна и для раздела каталога в интернет магазине или в фотогалерее. В общем, применение найдете сами. Итак:

В портфолио я использую комплексный компонент новостей. В шаблоне news.list создаю переменную $renderImg, в которую передаю уменьшенную картинку работы. Сжата достаточно сильно, методом CFile::ResizeImageGet - эта картинка будет в атрибуте src и будет видна поисковиками. Она же использует при подгзагрузке (но можете сделать gif крутилку)


$renderImg = CFile::ResizeImageGet($arItem['PREVIEW_PICTURE'], Array("width" => 200, "height" => 200), BX_RESIZE_IMAGE_PROPORTIONAL, false);

Весь вывод списка работ заворачиваю в div с id portfolio_loader. А вывод самой картинки работы выглядет так:


<img 
	v-bx-lazyload
	data-lazyload-src="<?= $arItem['PREVIEW_PICTURE']['SRC']?>"
	data-lazyload-error-src="error.jpg"
	src="<?=$renderImg['src']?>"
	alt="Сайт:  на битрикс"
/>
  • v-bx-lazyload - включаем
  • data-lazyload-src - путь к полной картинке
  • data-lazyload-error-src - картинка-ошибка, если не удалось загрузить

И создаем компонент скриптом. Можете положить его в script.js шаблона списка новостей- подключится сам.


BX.Vue.create({
    el: '#portfolio_loader'  
});

В общем-то все. Пример работы в портфолио

Полный код, если возникли сложности (в примере, подключил vue и директиву прямо в шаблоне компонента - для наглядности)


<? if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die();

// Подключение этих расширений лучше вынести в некешируемую область
// в component_epilog.php или в шаблон комплесного компонента
// например в section.php или news.php
\Bitrix\Main\UI\Extension::load("ui.vue");
\Bitrix\Main\UI\Extension::load("ui.vue.directives.lazyload");

$this->setFrameMode(true) ?>
<div class="row" id="portfolio_loader">
  <? foreach ($arResult["ITEMS"] as $arItem):
   $renderImg = CFile::ResizeImageGet($arItem['PREVIEW_PICTURE'], Array("width" => 200, "height" => 200), BX_RESIZE_IMAGE_PROPORTIONAL, false);
    ?>
    <div class="col-md-4 col-sm-6">
      <a class="port_item" title="Разработка сайта <?= $arItem['NAME'] ?>"
       href="<? echo $arItem["DETAIL_PAGE_URL"] ?>">
        <span>
         <img v-bx-lazyload
            data-lazyload-src="<?= $arItem['PREVIEW_PICTURE']['SRC']?>"
            data-lazyload-error-src="<?=$renderImage['src']?>"
            src="<?=$renderImg['src']?>"
            alt="Сайт: <? echo $arItem["NAME"] ?> на битрикс"
         />
        </span>
        <h4><? echo $arItem["NAME"] ?></h4>
        <i><? echo $arItem["PREVIEW_TEXT"]; ?></i>
      </a>
    </div>
  <? endforeach; ?>
</div>
Михаил Базаров 09.03.2019
Цитата
Сергей Стефанович написал:
Михаил, даешь сайт без jquery ?)
Скоро дам  ;)  
Дмитрий Мамченко 30.08.2019
Столкнулся с проблемой, что после сброса кэша работает. как только появляется кэш то не работает ленивая загрузка. Не сталкивались?
Михаил Базаров 30.08.2019
Цитата
Дмитрий Мамченко написал:
Столкнулся с проблемой, что после сброса кэша работает. как только появляется кэш то не работает ленивая загрузка. Не сталкивались?
Не замечал, сейчас у себя скинул кеш- вроде бы все работает как надо
Gavril Skriabin 02.09.2020
Прошу подсказать код для:
Код
<span
   class="product-item-image-original"
   id="<?=$itemIds['PICT'];?>"
   style="background-image:url('<?=$item['PREVIEW_PICTURE']['SRC']?>'); <?=($showSlider ? 'display: none;' : '')?>"
>
</span>

Никак не могу разобраться :-(
Стас Хлопотов 03.09.2020
Цитата
Дмитрий Мамченко пишет:
(в примере, подключил vue и директиву прямо в шаблоне компонента - для наглядности)
(в примере, подключил vue и директиву прямо в шаблоне компонента - для наглядности)

и получим проблему, когда template.php закешируется, для наглядности
Стас Хлопотов 03.09.2020
(в примере, подключил vue и директиву прямо в шаблоне компонента - для наглядности)

и получим проблему не подключения в template.php

\Bitrix\Main\UI\Extension::load("ui.vue");
\Bitrix\Main\UI\Extension::load("ui.vue.directives.lazyload");

при включеном кеше, для нагляности
Михаил Базаров 04.09.2020
Цитата
Стас Хлопотов написал:
(в примере, подключил vue и директиву прямо в шаблоне компонента - для наглядности)

и получим проблему не подключения в template.php

\Bitrix\Main\UI\Extension::load("ui.vue");
\Bitrix\Main\UI\Extension::load("ui.vue.directives.lazyload");

при включеном кеше, для нагляности
Включил у себя, в портфолио - работает без проблем (c кешированием)
Но, согласен, в template.php - подключать не стоит. Это в целом не практично
Гость 12.08.2022
Цитата
написал:
(в примере, подключил vue и директиву прямо в шаблоне компонента - для наглядности)
и получим проблему не подключения в template.php
\Bitrix\Main\UI\Extension::load("ui.vue");
\Bitrix\Main\UI\Extension::load("ui.vue.directives.lazyload");
при включеном кеше, для нагляности
Мне часто помогает этот сайт и я решил внести свою лепту. Столкнулся с той же проблемой (подключение пользовательских расширений и кеширование). Нигде не нашёл ответ в интернете, а в документации до сих пор пусто. Появилась гипотеза - всё сработало. Спросил у техподдержки и они предоставили то же решение, которое я нашёл до этого. Цитирую техподдержку:

"Подключение расширения нужно осуществлять в некешируемой области, для этого подходит component_epilog.php."

То есть, создаете файл component_epilog.php, подключаете проверку включения и далее подключаете класс загрузки расширения.
Михаил Базаров 13.08.2022
Цитата
Гость написал:
при включеном кеше, для нагляности
Появилась гипотеза - всё сработало. Спросил у техподдержки и они предоставили то же решение, которое я нашёл до этого. Цитирую техподдержку:

"Подключение расширения нужно осуществлять в некешируемой области, для этого подходит component_epilog.php."

То есть, создаете файл component_epilog.php, подключаете проверку включения и далее подключаете класс загрузки расширения.

Да, спасибо. Что бы больше ни у кого не было проблем, внес корректрировку в комментарий по коду.
Гость 12.09.2022
Добрый день!
Сделал все по инструкции но выскакивает ошибка в консоли
http://joxi.ru/a2XJlWQcQjB6er

помогите разобраться, спаксибо

Записная книжка разработчика

Примерно с 2013-го года пишу заметки по разработке сайтов на Битрикс.
Вы можете задавать уточняющие вопросы в комментариях- отвечаю или дополняю заметки по возможности.

Если товар в корзине, поменять кнопку на "В корзине" в новом шаблоне ... Просмотров: 1769 Ранее я уже делал заметку на эту тему. Тогда, мы меняли значение input-а при добавлении то... Фотогалерея на базе компонента новостей, с fancybox. Просмотров: 2906 Это заметка обновление к очень старой, уже имеющейся на сайте. Сделаем что-то типа фотогал... Быстрая отписка от всех рассылок модуля "E-mail маркетинг", в кабинет... Просмотров: 277 Задача: дать пользователям возможность отписаться от всех рассылок "E-mail маркетинга", не... Если предложение SKU в корзине, поменять кнопку добавления на "В корз... Просмотров: 3881 Данная заметка является дополнением к ранее опубликованной: Есл... Цвета торговых предложений из Highload инфоблоков в списке товаров Просмотров: 14905 Подвернулся на доработку очень старый сайт, работал еще на 11-ой версии Битрикс. Выполнили... Автогенерация символьных кодов разделов и элементов Битрикс Просмотров: 16130 Иногда нужно создать символьные коды для разделов и элементов. Например: если сайт создан ... Ajax форма обратной связи, реализация в битрикс Просмотров: 8680 Иногда, на сайте требуется создать форму обратной связи, которая будет писать все данные в... Пункты меню из разделов инфоблока Битрикс Просмотров: 93234 В принципе это стандартная возможность системы управления битрикс, но почему-то часто спра... Вывод элементов с помощью API битрикс Просмотров: 23961 Иногда, выводить элементы инфоблока с помощью компонентов, может оказаться избыточным. Нап... Установка веб-сервера LAMP на ubuntu 20.04 LTS, оптимизированный под ... Просмотров: 12750 В последнее время, плотно пересел c macOS на ubuntu, и решил настроить себе полноценное ра... Дополнительные картинки в новостях Битрикс, почти фотогалерея. Просмотров: 49498 Частенько стоит задача, по мимо стандартных "Картинка для анонса" и "Деталь... Настройка обмена между 1С:Предприятие и магазином на "1С-Битрикс24: И... Просмотров: 3430 В этой заметке расскажу как настроить синхронизацию между 1С:предприятие и "1С-Битрикс24: ... Как работает система сертификации партнеров 1С-Битрикс, уровни партне... Просмотров: 4471 Сертификация от «1С-Битрикс» – это объективная оценка знаний и практических навыков разраб... Если товар в корзине, поменять значение input на "В корзине" Просмотров: 11092 Если Вам нужно поменять текст на кнопке, добавляющей товар в корзину, достаточно воспользо... Вывести компонент новостей на страницу в Битрикс Просмотров: 65106 Посмотрел Яндекс метрику на свой сайт, и решил что буду частенько писать сюда именно то, ч... Заполнить картинки разделов каталога из картинок товаров Просмотров: 943 Задача: в каталоге, разделы и подразделы выводятся в виде плитки над товарами, с картинкам... Fancybox в стандартном шаблоне детальной карточки товара, вместо вспл... Просмотров: 104 Задача: заменить работу с изображениями в стандартном или кастомном шаблоне детальной карт... Удалить товары из корзины, если есть определенные товары. Просмотров: 1914 Задача: если в корзину добавлены товары с определенным свойством, нужно удалить из корзины... Получить все товары из всех заказов пользователя. История купленных т... Просмотров: 2216 Задача: нужно создать раздел, в персональном разделе пользователя, с историей всех купленн... Отключить поиск по описаниям товаров в Битрикс Просмотров: 11844 Иногда, нужно отключить поиск по описаниям анонсов и детальному описанию товаров, при разр...