Если на одну страницу сайта выводится большое количество картинок, которые могут долго подгружаться- либо нужно попасть в зеленую зону 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. А вывод самой картинки работы выглядет так:
— v-bx-lazyload - включаем
— data-lazyload-src - путь к полной картинке
— data-lazyload-error-src - картинка-ошибка, если не удалось загрузить
И создаем компонент скриптом. Можете положить его в script.js шаблона списка новостей- подключится сам.
В общем-то все. Пример работы в портфолио
Полный код, если возникли сложности (в примере, подключил vue и директиву прямо в шаблоне компонента - для наглядности)