Lazy Load - отложенная загрузка фото товаров. Lazy Load - отложенная загрузка изображений для virtuemart Добавление товара в Virtuemart
Описание
Множество пользователей ощутили на себе на сколько может быть неудобной стандартная загрузка изображений товаров в VirtueMart. Изображения можно загружать только по одному, нужно выбрать несколько опций, заполнить 3 текстовых поля и ждать пока перезагрузится страница... На то, чтобы загрузить все изображения для товаров Virtuemart у Вас уйдет немало времени. К тому же, эти изображения сначала нужно где-то найти и скачать или фотографировать товары самостоятельно. Конечно, можно нанять фрилансера, который сделает за Вас всю рутинную работу. Но в среднем добавление одного товара Вам обойдется от 15 до 40 руб . Умножив на количество товаров, которое Вам необходимо, получите весьма приличную сумму (1500 - 4000 руб. за 100 товаров )!
Но этому есть более приемлемая в цене альтернатива!
Внимание! 1 декабря 2015 Google отключил бесплатный API для поиска изображений, с помощью которого ранее работал данный компонент. Теперь поиск изображений осуществляется через условно бесплатный сервис Google Custom Search Engine. С его помощью можно осуществлять 100 запросов в сутки. Счетчик запросов сбрасывается в 11:00 по МСК. Дополнительные запросы в сутки предоставляются Google теперь на платной основе - 5 USD за 1000 запросов. Для идентификации в сервисе Google Custom Search Engine необходимо будет получить API-ключ (Инструкция ).
Возможности компонента:
Внимание! Обновления осуществляются через стандартный менеджер расширений Joomla на вкладке "Обновления"
7.04.2019
(v 2.5.0)
1) Расширен фильтр по категории: теперь можно выбрать несколько категорий, а также режим исключения категорий
2) Для найденных и имеющихся изображений добавлена возможность просмотра изображения в полном размере
3) Для имеющихся изображений добавлена возможность изменения порядка вывода изображений путем перетаскивания мышью
4) В общих настройках добавлена опция "Переименовывать файлы, загружаемые с ПК"
17.11.2017 (v 2.4.0) добавлена поддержка скачивания PNG-изображений с прозрачным фоном
4.10.2017 (v 2.3.0) путь для сохранения изображений товаров и категорий теперь берется из настроек VM
29.06.2017 (v 2.2.0) в режиме поиска "Категории" теперь отображается полный путь к категории, включающий родительские категории.
20.12.2016 (v 2.1.1) в настройках компонента добавлено поле "Поиск только на домене". Если указать в этом поле домен, то поиск изображений будет осуществляться только на указанном сайте
13.02.2016 (v 2.1.0) Добавлен фильтр товаров по наличию на складе
28.01.2016 (v 2.0.1) Оптимизирован алгоритм построения списка категорий для фильтров. Если у Вас на сайте очень большое число категорий, то теперь страница со списком товаров/категорий будет открываться гораздо быстрей.
4.12.2015 (v 2.0) Внимание! 1 декабря 2015 Google отключил бесплатный API для поиска изображений. Теперь поиск изображений осуществляется через условно бесплатный сервис Google Custom Search Engine. С его помощью можно осуществлять 100 запросов в сутки. Счетчик запросов сбрасывается в 11:00 по МСК. Дополнительные запросы в сутки предоставляются Google теперь на платной основе - 5 USD за 1000 запросов. Для идентификации в сервисе Google Custom Search Engine необходимо будет получить API-ключ (Инструкция).
5.09.2015
(v 1.8)
улучшено позиционирование водяного знака:
a) Добавлена возможность выбора единиц отступа - проценты или пиксели
b) Отступы водяного знака теперь задаются не для нижнего и правого краев водяного знака, а относительно его центра. Это позволит вам без проблем отцентрировать положение водяного знака, установив отступы справа и снизу равными 50%
c) Добавлена возможность выбора угла вращения водяного знака
d) Добавлена проверка соответствия размера водяного знака и основного изображения. Если один из линейных размеров водяного знака будет превышать соответствующий размер основного изображения, то водяной знак будет автоматически уменьшен.
2.09.2015 (v 1.7) добавлена функция проверка наличия изображения у товаров и категорий. Если будет обнаружено, что прикрепленное изображение не существует или нечитаемо, то привязка будет удалена.
04.07.2015 (v 1.6) Добавлен интерфейс для массового автоматического поиска и загрузки изображений. Добавлена возможность осуществлять поиск по комбинации "Производитель+Артикул"
04.06.2015 (v 1.5) добавлен фильтр по названию товаров и категорий.
27.04.2015 (v 1.4) добавлена возможность поиска изображений через прокси-сервер.
11.11.2014 (v 1.3) добавлена возможность наложения водяного знака на загружаемые изображения. Для этого необходимо в настройках прописать URL изображения-водяного знака в формате PNG.
9.11.2014 (v 1.2) добавлена возможность автоматического поиска и загрузки изображений по расписанию. Для этого добавлена вкладка в настройки компонента "Автоматический поиск и загрузка". На этой вкладке необходимо выбрать количество изображений, которое необходимо найти для каждого товара, у которого нет изображений. После этого Вам останется лишь добавить задание в планировщик Cron (В панели управления хостингом)
6.11.2014 (v 1.1) добавлена возможность мультизагрузки изображений с Вашего компьютера
Совместимость- PHP 5.4 и выше
- MySQL 5.5
- Joomla 2.5 - 3.9
- VirtueMart 2 - 3
Увеличить скорость загрузки страницы можно разными способами:
- кеширование
- сжатие css и js файлов
- оптимизация изображений
В этой статье подробно разберем последний пункт и покажем, каких результатов можно добиться.
При использовании lazy load (ленивой загрузки) для изображений вес страницы становится меньше, поэтому страница начинает грузиться быстрее.
Принцип работы прост - изображения динамически подгружаются, как только попадают в область видимости пользователя. Например, браузеру не нужно сразу загружать все фото товаров из категории, достаточно загрузить и показать изображения для нескольких товаров, которые попадают на первый экран. Если на странице выводится много товаров, то это позволит значительно ускорить загрузку.
Интегрировать lazy load в virtuemart можно 2 способами:
- вручную, внеся некоторые правки в шаблон
- с помощью плагина, который позволит добить lazy load для всех изображений на сайте
Существует множество скриптов, которые можно использовать для интеграции lazy load на сайт. Я использую echo.js . Сжатая версия скрипта весит всего 2 Кб. Пример работы можно посмотреть на этой странице .
Подключим скрипт на странице категории. На других страницах, на мой взгляд, нет особого смысла использовать ленивую загрузку. Если нужно добавить lazy load для всех изображений сайта, то лучше использовать плагин LLFJ - Lazy Load for Joomla! , о котором пойдет речь в следующем разделе.
Итак, скопируем файлы скрипта в папку шаблона /templates/имя_шаблона/echo/ .
Заменим код вывода изображения в категории.
Для virtuemart 3
В файле /components/com_сайтblayouts/products.php заменим