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

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

Сообщений: 1561 Авторитет: 7 Регистрация: 7 ноября 2013

8 марта 2019 23:18:34

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

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

Сергей Стефанович Пользователь Сообщений: 27 Авторитет: 7 Регистрация: 12 декабря 2017	#2 0 8 марта 2019 23:18:34 Михаил, даешь сайт без jquery ?)

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

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

Сообщений: 1561 Авторитет: 7 Регистрация: 7 ноября 2013

9 марта 2019 10:51:55

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

Скоро дам

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

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

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

Сообщений: 1561 Авторитет: 7 Регистрация: 7 ноября 2013

30 августа 2019 18:00:30

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

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

Gavril Skriabin

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

Сообщений: 1 Авторитет: 0 Регистрация: 2 сентября 2020

2 сентября 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 Регистрация: 3 сентября 2020

3 сентября 2020 15:01:54

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

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

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

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

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

Сообщений: 2 Авторитет: 0 Регистрация: 3 сентября 2020

3 сентября 2020 15:03:47

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

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

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

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

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

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

Сообщений: 1561 Авторитет: 7 Регистрация: 7 ноября 2013

4 сентября 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 Битрикс

Блог-note разработчика

Авторизация