Подгрузка изображений по необходимости
Это решение подгружает изображения товаров для видимой части окна браузера, т.е. после открытия страницы и по мере скроллинга.
В файл ./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
В этом же шаблоне находим слой <div class="product-list"> и в его теле для тега<img> заменяем атрибут src на rel и убираем атрибут alt.Код:<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>
Готово, список товаров с картинками для категории теперь с элементами интерактива. Аналогичные действия можно выполнить для результатов поиска, списка товаров, участвующих в акциях и списка товаров производителей.
Купить ксенон в любое время
Немає коментарів:
Дописати коментар