Если на одну страницу сайта выводится большое количество картинок, которые могут долго подгружаться- либо нужно попасть в зеленую зону 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>
| Цитата |
|---|
| Дмитрий Мамченко написал: Столкнулся с проблемой, что после сброса кэша работает. как только появляется кэш то не работает ленивая загрузка. Не сталкивались? |
| Код |
|---|
<span
class="product-item-image-original"
id="<?=$itemIds['PICT'];?>"
style="background-image:url('<?=$item['PREVIEW_PICTURE']['SRC']?>'); <?=($showSlider ? 'display: none;' : '')?>"
>
</span>
|
Никак не могу разобраться
| Цитата |
|---|
| Дмитрий Мамченко пишет: (в примере, подключил vue и директиву прямо в шаблоне компонента - для наглядности) |
и получим проблему, когда template.php закешируется, для наглядности
и получим проблему не подключения в 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"); при включеном кеше, для нагляности |
Но, согласен, в template.php - подключать не стоит. Это в целом не практично
| Цитата |
|---|
| написал: (в примере, подключил 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, подключаете проверку включения и далее подключаете класс загрузки расширения.
| Цитата |
|---|
| Гость написал: при включеном кеше, для нагляности Появилась гипотеза - всё сработало. Спросил у техподдержки и они предоставили то же решение, которое я нашёл до этого. Цитирую техподдержку: "Подключение расширения нужно осуществлять в некешируемой области, для этого подходит component_epilog.php." То есть, создаете файл component_epilog.php, подключаете проверку включения и далее подключаете класс загрузки расширения. |
Да, спасибо. Что бы больше ни у кого не было проблем, внес корректрировку в комментарий по коду.