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

Администратор

Сообщений: 1616 Баллов: 111110 Рейтинг: 1 Регистрация: 07.11.2013

08.03.2019 23:18:34

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

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

Цитировать Имя

Сергей Стефанович Пользователь Сообщений: 26 Рейтинг: 0 Регистрация: 12.12.2017	#2 0 08.03.2019 23:18:34 Михаил, даешь сайт без jquery ?)
	Цитировать Имя

Михаил Базаров

Администратор

Сообщений: 1616 Баллов: 111110 Рейтинг: 1 Регистрация: 07.11.2013

09.03.2019 10:51:55

Цитата
Сергей Стефанович написал: Михаил, даешь сайт без jquery ?)

Скоро дам

Цитировать Имя

Дмитрий Мамченко Пользователь Сообщений: 1 Рейтинг: 0 Регистрация: 30.08.2019	#4 0 30.08.2019 10:08:33 Столкнулся с проблемой, что после сброса кэша работает. как только появляется кэш то не работает ленивая загрузка. Не сталкивались?
	Цитировать Имя

Михаил Базаров

Администратор

Сообщений: 1616 Баллов: 111110 Рейтинг: 1 Регистрация: 07.11.2013

30.08.2019 18:00:30

Цитата
Дмитрий Мамченко написал: Столкнулся с проблемой, что после сброса кэша работает. как только появляется кэш то не работает ленивая загрузка. Не сталкивались?

Не замечал, сейчас у себя скинул кеш- вроде бы все работает как надо

Цитировать Имя

Gavril Skriabin

Пользователь

Сообщений: 1 Рейтинг: 0 Регистрация: 02.09.2020

02.09.2020 15:51:56

Прошу подсказать код для:

Код
<span class="product-item-image-original" id="<?=$itemIds['PICT'];?>" style="background-image:url('<?=$item['PREVIEW_PICTURE']['SRC']?>'); <?=($showSlider ? 'display: none;' : '')?>" > </span>

Никак не могу разобраться :-(

Цитировать Имя

Стас Хлопотов

Пользователь

Сообщений: 2 Рейтинг: 0 Регистрация: 03.09.2020

03.09.2020 15:01:54

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

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

и получим проблему, когда template.php закешируется, для наглядности

Цитировать Имя

Стас Хлопотов

Пользователь

Сообщений: 2 Рейтинг: 0 Регистрация: 03.09.2020

03.09.2020 15:03:47

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

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

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

при включеном кеше, для нагляности

Цитировать Имя

Михаил Базаров

Администратор

Сообщений: 1616 Баллов: 111110 Рейтинг: 1 Регистрация: 07.11.2013

04.09.2020 09:22:37

Цитата

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

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

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

при включеном кеше, для нагляности

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

Цитировать Имя

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

Заметки разработчика