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

Просмотров: 3594 | Комментариев: 3

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

Необходимо войти что бы оставить комментарий:
Сергей Стефанович
Михаил, даешь сайт без jquery ?)
Михаил Базаров
Цитата
Сергей Стефанович написал:
Михаил, даешь сайт без jquery ?)
Скоро дам  ;)  
Дмитрий Мамченко
Столкнулся с проблемой, что после сброса кэша работает. как только появляется кэш то не работает ленивая загрузка. Не сталкивались?
Михаил Базаров
Цитата
Дмитрий Мамченко написал:
Столкнулся с проблемой, что после сброса кэша работает. как только появляется кэш то не работает ленивая загрузка. Не сталкивались?
Не замечал, сейчас у себя скинул кеш- вроде бы все работает как надо
Решения на битрикс

Магазин, на базе готового решения от 35 900 рублей / от 3 до 5 дней

В стоимость входит: Подбор решения из более 200-от готовых сайтов, под Вашу задачу. Полный запуск сайта на сервере или хостинге, со всеми настройками. Лицензия Битрикс "Малый бизнес". Базовая СЕО оптимизация. Инструкции по работе с сайтом. Небольшие доработки под задачу.
Интернет-магазин от 210 000 рублей / от 5-ти недель Сайт компании от 90 000 рублей / от 4-х недель Инфоресурс от 90 000 рублей / от 5-ти недель Адаптивный сайт от 40 000 рублей / от 2-х недель Персональный сайт от 60 000 рублей / от 3-х недель Мобильное приложение от 180 000 рублей / от 4-х недель
Узнать точную стоимость разработки: Для этого, достаточно, как можно подробнее, заполнить вот этот опросник: Скачать опросник и выслать на электронную почту mihail@bazarow.ru.
Смогу задать уточняющие вопросы и оценить проект по срокам и стоимости.
Поделиться заметкой: Спасибо, это помогает развивать сайт:

Авторизация

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