Lazy Load - отложенная загрузка изображений для virtuemart

Опубликовано: 14 июня, 2016

Обновлено: 5 февраля, 2023

Увеличить скорость загрузки страницы можно разными способами:

кеширование
сжатие css и js файлов
оптимизация изображений
отложенная загрузка контента

В этой статье подробно разберем последний пункт и покажем, каких результатов можно добиться.

При использовании lazy load (ленивой загрузки) для изображений вес страницы становится меньше, поэтому страница начинает грузиться быстрее.

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

Интегрировать lazy load в virtuemart можно 2 способами:

вручную, внеся некоторые правки в шаблон
с помощью плагина, который позволит добить lazy load для всех изображений на сайте

Добавляем lazy load вручную

Существует множество скриптов, которые можно использовать для интеграции lazy load на сайт. Я использую echo.js. Сжатая версия скрипта весит всего 2 Кб. Пример работы можно посмотреть на этой странице.

Подключим скрипт на странице категории. На других страницах, на мой взгляд, нет особого смысла использовать ленивую загрузку. Если нужно добавить lazy load для всех изображений сайта, то лучше использовать плагин LLFJ - Lazy Load for Joomla!, о котором пойдет речь в следующем разделе.

Итак, скопируем файлы скрипта в папку шаблона /templates/имя_шаблона/echo/ .

Скачать

Заменим код вывода изображения в категории.

Для virtuemart 3

В файле /components/com_virtuemart/sublayouts/products.php заменим

<a title="<?php echo $product->product_name ?>" href="<?php echo $product->link.$ItemidStr; ?>">

<?php

echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);

</a>

на

<a title="<?php echo $product->product_name ?>" class="echo-img" href="<?php echo $product->link; ?>">

<?php

echo '<img src="/templates/имя_шаблона/echo/blank.gif" data-echo="/'.$product->images[0]->file_url.'" alt="'.$product->product_name.'">';

</a>

Для virtuemart 2

В файле /components/com_virtuemart/views/category/tmpl/default.php заменим

<a title="<?php echo $product->product_name ?>" href="<?php echo $product->link; ?>">

<?php

echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);

</a>

на

<a title="<?php echo $product->product_name ?>" class="echo-img" href="<?php echo $product->link; ?>">

<?php

echo '<img src="/templates/имя_шаблона/echo/blank.gif" data-echo="/'.$product->images[0]->file_url.'" alt="'.$product->product_name.'">';

</a>

Добавим вызов скрипта в самом конце файла /components/com_virtuemart/views/category/tmpl/default.php (для всех версий vm).

<?php

$document = JFactory::getDocument();

$document->addScript('/templates/имя_шаблона/echo/echo.min.js');

echo.init({

offset: 100,

throttle: 250,

unload: false,

});

</script>

Скрипт имеет ряд настроек. Подробнее про все настройки можно почитать на этой странице.

В адресе замените имя_шаблона на название вашего шаблона.

1	'/templates/имя_шаблона/echo/echo.min.js'

offset - параметр смещения. Позволяет начинать загрузку изображений до того, как они попадут в область видимости. 100 - расстояние в px от области видимости, при котором начинается загрузка.

Ниже сравнительная таблица, полученная с помощью сервиса https://tools.pingdom.com. Для теста на странице выводилось 90 товаров.

	Без echo.js	C echo.js
Размер страницы	1500 kB	850kB
Время загрузки	7.07s	4.79s

Плагин LLFJ - Lazy Load for Joomla!

Чтобы обойтись без правок кода можно использовать готовый плагин LLFJ - Lazy Load for Joomla!

Скачать

Плагин совместим только с joomla 3 и позволяет очень гибко настроить ленивую загрузку на сайте.

Все настройки находятся в Расширения > Менеджер плагинов > System - LLFJ - Lazy Load for Joomla! > Settings

Можно отключить lazy load для отдельных изображения, компонентов, страниц и поисковых роботов. Добавить fallback для пользователей с отключенным javascript и выбрать эффект появления изображений.

Выбирайте способ на свой вкус и сделайте ваш сайт чуточку быстрее 🙂

Плюс к отложенной загрузке изображений лучше всего оптимизировать (сжать) сами изображения. Оптимизированные изображения будут загружаться значительно быстрее. При этом никаких видимых изменений или потери качества изображений нет. Можно сжать каждую картинку на сайте вручную (к примеру, через Photoshop). Но при большом количестве изображений на сайте это занятие становится очень трудоемким и из-за этого практически невыполнимым. В этом случае придет на помощь сервис OptiPic.io - он позволяет оптимизировать процесс - находит и сжимает все изображения на вашем сайте. Подключается очень легко к сайту на любой CMS, фреймворку или даже самописном движке.

Tobi

15 июня, 2016 at 00:05

Отличная статья, спасибо, буду пробовать!

NIKOLY

18 октября, 2016 at 08:16

Здравствуйте!
скрипт выводит большое изображение

<?php
echo 'images[0]->file_url.'" alt="'.$product->product_name.'">';
?>

возможно ли вывести миниатюру?

admin

18 октября, 2016 at 11:34

Здравствуйте!

Для вывода миниатюры попробуйте использовать код

1	$product->images[0]->getThumbUrl()

NIKOLY

18 октября, 2016 at 12:34

практически работает) выводит

а миниатюры переименовываются под размер, т.е. по пути нет такой картинке есть kartinka_0x100.jpg

Николай

1 ноября, 2016 at 16:50

Упс, не прочитал чего написал, видемо тег img удалило)
проблема такая получилась: виртуал март делая миниатюры переименовывает их и в данном случае

1	$product->images[0]->getThumbUrl()

миниатюры не загружаются т.к. в пути указана kartinka.jpg, а её нет есть kartinka_0x100.jpg

admin

2 ноября, 2016 at 17:05

Попробуйте этот вариант

1	$product->images[0]->createThumb();

Igoralmaty

7 марта, 2020 at 18:00

При таком варианте все работает, но в некоторых разделах появляется ошибка:

"0 - Call to undefined method VmMediaHandler::createThumb()"

admin

8 марта, 2020 at 08:55

Скорее всего, в этих разделах есть картинки, формат которых не поддерживает virtuemart.
Попробуйте поочередно отключать товары, чтобы найти тот, который вызывает проблему.

Igoralmaty

9 марта, 2020 at 06:50

Данная ошибка появляется в случае если на странице присутствуют товары, у которых отсутствуют изображения. Тег img в данном случае выглядит следующим образом:
Как обойти эту ситуацию, ведь в самой карточке картинка noimage.gif присутствует?

admin

9 марта, 2020 at 08:34

Ошибка возникает при попытке сделать уменьшенную версию картинки.
Попробуйте добавить дополнительное условие для вывода

1	$product->images[0]->createThumb();

В этом условии можно проверить, например, имя картинки.
Распечатайте массив, чтобы посмотреть какое точно имя у картинки.

1	$product->images[0]

Igoralmaty

9 марта, 2020 at 15:25

Массив следующий:

VmMediaHandler Object
(
[media_attributes] => 0
[setRole] =>
[file_name] =>
[file_extension] =>
[virtuemart_media_id] => 0
[_foldersToTest:VmMediaHandler:private] => Array
(
[0] => images/stories/virtuemart/product/
[1] => images/stories/virtuemart/product/resized/
)

[_actions:VmMediaHandler:private] => Array
(
)

[_mLocation:VmMediaHandler:private] => Array
(
)

[_hidden:VmMediaHandler:private] => Array
(
)

[theme_url] => components/com_virtuemart/
[virtuemart_vendor_id] => 0
[file_title] =>
[file_description] =>
[file_meta] =>
[file_class] =>
[file_mimetype] =>
[file_type] => products
[file_url] => images/stories/virtuemart/product/
[file_url_thumb] =>
[published] => 0
[file_is_downloadable] => 0
[file_is_forSale] => 0
[file_is_product_image] => 0
[shared] => 0
[file_params] => 0
[file_lang] =>
[created_on] =>
[created_by] => 0
[modified_on] =>
[modified_by] => 0
[file_url_folder] => images/stories/virtuemart/product/
[file_path_folder] => images/stories/virtuemart/product/
[file_url_folder_thumb] => images/stories/virtuemart/product/resized/
[media_role] => file_is_displayable
)

Igoralmaty

9 марта, 2020 at 20:36

А имя у картинки noimage.gif, путь components/com_virtuemart/assets/images/vmgeneral

admin

10 марта, 2020 at 14:01

Попробуйте вместо

1	echo '<img src="/templates/имя_шаблона/echo/blank.gif" data-echo="/'.$product->images[0]->file_url.'" alt="'.$product->product_name.'">';

использовать

if ($product->images[0]->file_url->file_url_thumb) {

echo '<img src="/templates/имя_шаблона/echo/blank.gif" data-echo="/'.$product->images[0]->file_url.'" alt="'.$product->product_name.'">';

} else {

echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);

}

Igoralmaty

11 марта, 2020 at 13:02

Всегда срабатывает else, проверено через:

if ($product->images[0]->file_url->file_url_thumb) {

echo 'images[0]->file_url.'" alt="'.$product->product_name.'">';

echo '111';

} else {

echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);

echo '222';

}

admin

11 марта, 2020 at 13:39

Замените

1	$product->images[0]->file_url->file_url_thumb

на

1	$product->images[0]->file_url_thumb

Stasweb

7 февраля, 2018 at 07:39

В логах пишет
404 GET /imidzhevaya-produktsiya/bejdzhi/templates/lik-astana/echo/blank.gif HTTP/1.0
Хотя файл _lik-astana.kz/templates/lik-astana/echo/blank.gif есть.
Почему он его так подключает

admin

7 февраля, 2018 at 10:07

Судя по коду не хватает файла по пути site.ru/imidzhevaya-produktsiya/bejdzhi/templates/lik-astana/echo/blank.gif

Stasweb

7 февраля, 2018 at 11:27

да но ссылка site.ru/templates/lik-astana/echo/blank.gif доступна и файл blank.gif отображается.
вот мой код

<a title="product_name ?>" class="echo-img" href="link; ?>">

<?php

echo 'images[0]->file_url.'" alt="'.$product->product_name.'">';

</a>

пробовал так

1	echo 'images[0]->file_url.'" alt="'.$product->product_name.'">';

так же не работает

admin

7 февраля, 2018 at 18:31

Надо смотреть непосредственно на сайте.
Пришлите доступ к админке, доступ к сайту по ftp и описание проблемы на admin@virtuemart.su, посмотрю, что можно сделать.

TYMON_krot

13 апреля, 2020 at 11:18

Здравствуйте. А как правильно отключить в плагине LLFJ - Lazy Load for Joomla! ? Прописывал различные варианты, но что-то не срабатывает

TYMON_krot

13 апреля, 2020 at 11:57

отключить URL , а то не указал в сообщении

admin

13 апреля, 2020 at 14:20

Пришлите скрин настроек, которые не срабатывают.

TYMON_krot

13 апреля, 2020 at 15:24

Не знаю как в комментарий подключить скрин.
пробовал так вписывать

/my-cart
my-cart
modaparadise.ru/my-cart
https://modaparadise.ru/my-cart

Опция Toggle selection - Include URLs - Да

Илья

2 июля, 2020 at 14:11

Ваш сайт просто космос! Спасибо за работу.
Не подскажите, а как сделать ленивую загрузку для фоток подкатегорий?
echo.js
Заранее благодарен!

Иван

3 июля, 2020 at 12:02

Сделал загрузку фото категорий так:
в файле com_virtuemart/sublayouts/categories.php
заменил

<?php

$catDesc = explode('', $category->category_description);

echo strip_tags($catDesc[0]);

images[0]->displayMediaThumb("",false);

</a>

на

<?php

$catDesc = explode('', $category->category_description);

echo strip_tags($catDesc[0]);

ids) {

echo 'images[0]->file_url.'" alt="'.$category->category_name.'">';

//} ?>

</a>

вроде работает

admin

3 июля, 2020 at 13:31

Спасибо, что поделились решением.

Комментарии закрыты

Lazy Load - отложенная загрузка изображений для virtuemart

Добавляем lazy load вручную

Плагин LLFJ - Lazy Load for Joomla!

Похожие статьи :

26 комментариев

Tobi

NIKOLY

admin

NIKOLY

Николай

admin

Igoralmaty

admin

Igoralmaty

admin

Igoralmaty

Igoralmaty

admin

Igoralmaty

admin

Stasweb

admin

Stasweb

admin

TYMON_krot

TYMON_krot

admin

TYMON_krot

Илья

Иван

admin