В данной статье речь пойдёт об оптимизации сетевого трафика при работе с магазином OpenCart. Как известно, привлечение покупателя к товару будет вызвано, прежде всего, наличием его изображения с описанием. Изображение всегда играет ключевую роль в рекламе, но это также и дополнительная нагрузка на пропускную способность канала вашего хостинга.
Часто провайдер уверяет, что сайт подключён к высокоскоростному порту, однако на деле может использоваться один сетевой интерфейс для нескольких клиентов и с меньшей пропускной способностью (10Мбит/c вместо 100Мбит/c), а это ничто иное, как снижение производительности при работе с OpenCart.
Проблема в том, что за один переход по каталогу магазина, сервер отдаст в среднем от 500 до 1000 килобайт графики (речь идёт об оптимизированных изображениях, по 50Кб). Теперь представьте активного пользователя и не одного, а с десяток, которые быстро перемещаются по категориям в поисках подходящего товара или просто из любопытства. Последним особенно не стоит отдавать все изображения сразу, т.к. они могут их и не увидеть.
Это решение подгружает изображения товаров для видимой части окна браузера, т.е. после открытия страницы и по мере скроллинга. Кстати, на некоторых тарифах есть ограничение на исходящий трафик, это решение также сэкономит и ваши денежные средства!
В файл
./catalog/view/theme/default/template/common/header.tpl в тело тега
<head> добавьте следующее:
<style type="text/css">.product-list img[rel] { width: <?php echo $this->config->get('config_image_category_width'); ?>px; height: <?php echo $this->config->get('config_image_category_height'); ?>px; display: block; background: url('catalog/view/theme/default/image/loading.gif') center center no-repeat; }</style>
Данный код задаёт стиль контейнера изображений с атрибутом relationship до того, как в него будет загружено реальное изображение при помощи кода JavaScript, текст которого приведён ниже. Этот код необходимо поместить в шаблон
./catalog/view/theme/default/template/product/category.tpl
<script type="text/javascript"><!--
function isScrolledIntoView(element) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elementTop = $(element).offset().top;
var elementBottom = elementTop + $(element).height();
return ((elementBottom <= docViewBottom) && (elementTop >= docViewTop));
}
$(window).ready(function() {
$(window).resize(function() {
ImageIntoView();
});
$(window).scroll(function() {
ImageIntoView();
});
ImageIntoView();
});
function ImageIntoView() {
$('img[rel]:not([src])').each(function() {
if (isScrolledIntoView(this)) {
$(this).attr('src', $(this).attr('rel')).load(function() {;
$(this).removeAttr('rel');
});
}
});
}
//--></script>
В этом же шаблоне находим слой
<div class="product-list"> и в его теле для тега
<img> заменяем атрибут
src на
rel и убираем атрибут
alt.
Готово, список товаров с картинками для категории теперь с элементами интерактива. Аналогичные действия можно выполнить для результатов поиска, списка товаров, участвующих в акциях и списка товаров производителей.
Если у Вас возникли трудности с реализацией данного решения, то мы готовы вам в этом помочь.
UPDATE
 |
| Рисунок 1. Модуль подгрузки изображений OpenCart Image Preloader v1.0 |
Решение получило продолжение в виде отдельного модуля
Image Preloader без необходимости внесения каких-либо изменений в основной код OpenCart и без использования vQmod.
Кроме того, улучшен сам алгоритм подгрузки изображений. Теперь картинки выстраиваются в очередь - когда следующее изображение будет подгружено после загрузки последнего.
Дополнительно между загрузками можно выставить интервал в миллисекундах, что определенно позволяет снизить нагрузку на статику сервера.
Модуль поддерживает как минимум четыре основных раздела (
Категория, Поиск, Производитель, Акции), но могут быть выбраны и другие разделы, в том числе самописные, если их шаблоны построены на основе базовых разделов.
Состав архива (OpenCart v1.5+):
./admin/language/english/module/image_preloader.php
./admin/language/russian/module/image_preloader.php
./admin/controller/module/image_preloader.php
./admin/view/template/module/image_preloader.tpl
./catalog/controller/module/image_preloader.php
./catalog/view/theme/default/template/module/image_preloader.tpl
./catalog/view/theme/default/image/loading.gif
Представленный ниже список файлов необходимо поместить в каталог OpenCart согласно их директориям.
Условия приобретения: Модуль может быть использован только в личных целях, не допускается распространение в составе ПО OpenCart без согласия авторов модуля или публикация его в общедоступном виде. Модуль возврату не подлежит!
Условия поддержки: Бесплатная поддержка в рамках базовой версии 1.x, в том числе выпуск возможных обновлений, осуществляется в течении года с момента приобретения через зарегистрированный электронный адрес, с использованием которого была осуществлена сделка.
Стоимость: $5
.png)
