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

Версия Joomla

Лицензия

Плагин для отложенной загрузки фото товаров в Joomshopping и Virtuemart. С помощью него страницы каталога будут загружаться значительно быстрее за счет эффекта постепенной загрузки картинок.

Плагин отложенной загрузки фото товаров

Joomla 1.5 - 2.5, 3.x + JoomShopping, Virtuemart 1.x - 2.x

за 400 руб.

Техническая поддержка и бесплатные обновления в течении 1 года. Лицензия на домен

Возможности

Все видели как во многих современных интернет магазинах фото товара появляются не сразу, а по мере прокрутки страницы. Закономерный вопрос - зачем? Что это дает? А ответ прост - это позволяет уменьшить время загрузки страницы. Причем скорость загрузки сайта важна не только для пользователя, но и для поисковых систем - скорость загрузки страницы учитывается при ранжировании сайтов в поисковой выдаче.

Плагин использует хорошо известный jQuery плагин lazyload . Смысл его работы заключается в том, что при загрузке страницы грузятся только картинки, которые видны на первом экране. Вместо всех остальных картинок, лежащих ниже - ставиться маленькая "заглушка". Браузер считает страницу загруженной, а по мере скролла страницы подгружаются картинки вместо заглушек. Приведу результаты небольшого теста. На моем сайте я выставил 96 товаров на страницу и измерил скорость загрузки страницы. Без плагина - 4.5 сек. С плагином - 0.99 сек. Выводы делайте сами.

Настройки

Плагин предназначен для Joomla 1.5 и 2.5, 3.x. Обрабатывает только фото товара virtuemart и joomshopping (фото, в пути к которым есть слово "product"). Для того чтобы все заработало - необходимо только установить и опубликовать плагин.

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

Второе - если у Вас Virtuemart линейки 1.1.* и при выводе фото товара используется скрипт show_image_in_imgtag.php - плагин тоже не будет работать. Проверить можете посмотрев на адрес фото товара в категории на своем сайте - этот скрипт будет в адресе. Например - src ="/components/com_virtuemart/show_image_in_imgtag.php?filename=resized%2FBody_4f1e6a7cba9a3_90x90.jpg&newxsize=90&newysize=90&fileout= " . Бесплатный совет - избавляйтесь от этой гадости - скрипт дает огромную нагрузку на сервер.

Третье - плагин не подходит для мобильных устройств

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

кеширование
сжатие 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_сайтblayouts/products.php заменим

< a title = " " href = " " >