В данной статье речь пойдёт об оптимизации сетевого трафика при работе с магазином 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.
Готово, список товаров с картинками для категории теперь с элементами интерактива. Аналогичные действия можно выполнить для результатов поиска, списка товаров, участвующих в акциях и списка товаров производителей.