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

Если на одну страницу сайта выводится большое количество картинок, которые могут долго подгружаться- либо нужно попасть в зеленую зону 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();
\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>

Просмотров: 7506 | Комментариев: 6
Внимание! все сообщения проходят премодерацию. Ваше сообщение появится после проверки
 
Текст сообщения*
Перетащите файлы
Ничего не найдено
Защита от автоматических сообщений
Загрузить файл
Нажимая кнопку "Отправить", Вы принимаете условия
Политики конфиденциальности и обработки персональных данных
Сергей Стефанович
Михаил, даешь сайт без jquery ?)
Имя Цитировать
Михаил Базаров
Цитата
Сергей Стефанович написал:
Михаил, даешь сайт без jquery ?)
Скоро дам  ;)  
Имя Цитировать
Дмитрий Мамченко
Столкнулся с проблемой, что после сброса кэша работает. как только появляется кэш то не работает ленивая загрузка. Не сталкивались?
Имя Цитировать
Михаил Базаров
Цитата
Дмитрий Мамченко написал:
Столкнулся с проблемой, что после сброса кэша работает. как только появляется кэш то не работает ленивая загрузка. Не сталкивались?
Не замечал, сейчас у себя скинул кеш- вроде бы все работает как надо
Имя Цитировать
Gavril Skriabin
Прошу подсказать код для:
Код
<span
   class="product-item-image-original"
   id="<?=$itemIds['PICT'];?>"
   style="background-image:url('<?=$item['PREVIEW_PICTURE']['SRC']?>'); <?=($showSlider ? 'display: none;' : '')?>"
>
</span>

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

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

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

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

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

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

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

при включеном кеше, для нагляности
Включил у себя, в портфолио - работает без проблем (c кешированием)
Но, согласен, в template.php - подключать не стоит. Это в целом не практично
Имя Цитировать

Цены на разработку сайта или приложения

Что бы узнать точные стоимость и срок разработки:
достаточно, как можно подробнее, заполнить опросник и выслать на электронную почту info@bazarow.ru.
После ознакомления, смогу задать уточняющие вопросы и оценить.

В стоимость разработки уже включены и не требуют доплат:
  • Лицензия на необходимую редакцию 1С-Битрикс: Управление сайтом и лицензии на дополнительные модули, если требуются для конкретного проекта.
  • Применение технологии композитный сайт: Оптимизация скорости работы проекта под нагрузками.
  • Один год, бесплатной, технической поддержки от 1С-Битрикс
Интернет-магазин от 250 000 рублей
Полно-комплексная разработка интернет-магазина любой сложности. Интеграция с 1С, службами доставки и оплаты. Внутренняя СЕО оптимизация перед запуском.
Сайт компании от 200 000 рублей
Сайт с каталогом товаров или услуг, без функционала магазина. Включает формы обратной связи внутри карточек каталога. Любое количество статичных и динамичных разделов.
Инфоресурс от 200 000 рублей
Портал или доска объявлений с большим количеством разделов. Возможность включения форумов, блогов, регистрации пользователей, внутри сайтовая социальная сеть.
Сайт на готовом решении от 40 000 рублей
Подбор решения из более 200-от готовых сайтов, в соответствии с тематикой бизнеса. Запуск сайта на сервере или хостинге, со всеми настройками. Не большие доработки под задачу.
Мобильное приложение от 200 000 рублей

Кроме сайтов, занимаюсь разработкой мобильных приложений на технологии Apache Cordova. Это полноценные приложения, которые публикуются и распостранияются через официальные магазины GooglePlay и AppStore

  • Полная интеграция с базой данных, основного сайта.
  • Вывод каталогов продукции и услуг, прямо в приложении.
  • Персональные разделы пользователей с историей заказов.
  • Прямой доступ к устройству: GPS, камера, звонки и медиабиблиотека

attention