Ленивая загрузка картинок LazyLoad Shop-Script

(11 оценок, среднее: 5,00 из 5)

Загрузка...

Автоматическая подгрузка изображений товаров (Ленивая загрузка картинок) на основе скрипта LazyLoad для Webasyst Shop-Script.

Немного не понятно, почему в шопскрипте реализована динамическая (ленивая) подгрузка товаров на плагине Lazyload, но нет ленивой загрузки изображений.
В общем решение нашел следующее:
1. Находим файл shopViewHelper.class.php в папке wa-apps\shop\lib\classes\
2. Редактируем функцию imgHtml
строка 441 public function imgHtml
И заменяем строку

$html .= ' src="'.$this->imgUrl($image, $size).'">';

1	$html .= ' src="'.$this->imgUrl($image, $size).'">';

на

$html .= ' data-src="'.$this->imgUrl($image, $size).'">';

1	$html .= ' data-src="'.$this->imgUrl($image, $size).'">';

Теперь все ссылки на изображения будут формироваться с data-src вместо src.

Дальше нам надо будет подключить сам скрипт Lazyload от Verlok.
https://github.com/verlok/lazyload

Я выбрал версию Lazyload 8.17 так как она более совместима со всеми браузерами.

Скачиваем файл lazyload.min.js и копируем его в папку (\wa-data\public\shop\themes\ваша-тема\js\).
Создаем в этой же папке файл lazyload.js

1. Подключаем скрипт через шаблон магазина head.html (\wa-data\public\shop\themes\ваша-тема\)
Добавляем в файл строку

<script src="{$wa_theme_url}js/lazyload.min.js" async></script>
<script src="{$wa_theme_url}js/lazyload.js"></script>

1 2	<script src="{$wa_theme_url}js/lazyload.min.js" async></script> <script src="{$wa_theme_url}js/lazyload.js"></script>

2. Открываем файл lazyload.js и редактируем его:

$(document).ready(function () {
(function () {
var ll = new LazyLoad({
elements_selector : "[data-src]",
threshold: 0,
load_delay : 200
});

var lazyLoadInstances = [];
var lazyLazy = new LazyLoad({
elements_selector: ".main-slider-product-home-split",
callback_set: function(el) {
var oneLL = new LazyLoad({
container: el
});
lazyLoadInstances.push(oneLL);
}
});

})();
});

$(document).on('DOMNodeInserted', '#product-core-image', function() {
var imgdel = $(this).parent().find('img');
for (var i=0; i<imgdel.length; i++) {
if(imgdel[i].getAttribute('data-src')) {
imgdel[i].setAttribute('src',imgdel[i].getAttribute('data-src'));
//imgdel[i].removeAttribute('data-src');
}
}

});

$(document).ready(function () {

(function () {

var ll = new LazyLoad({

elements_selector : "[data-src]",

threshold: 0,

load_delay : 200

});

var lazyLoadInstances = [];

var lazyLazy = new LazyLoad({

elements_selector: ".main-slider-product-home-split",

callback_set: function(el) {

var oneLL = new LazyLoad({

container: el

});

lazyLoadInstances.push(oneLL);

}

});

})();

});

$(document).on('DOMNodeInserted', '#product-core-image', function() {

var imgdel = $(this).parent().find('img');

for (var i=0; i<imgdel.length; i++) {

if(imgdel[i].getAttribute('data-src')) {

imgdel[i].setAttribute('src',imgdel[i].getAttribute('data-src'));

//imgdel[i].removeAttribute('data-src');

}

});

3. Так же нам необходимы минимальные стили для плавного появления картинок.
Добавляем небольшой css внутри index.html в разделе head

<style>
.thumbnail-catalog img {
opacity: 0;
}
.thumbnail-catalog img:not(.initial) {
transition: opacity 1s;
}
.thumbnail-catalog img.initial,
.thumbnail-catalog img.loaded,
.thumbnail-catalog img.error {
opacity: 1;
}

.thumbnail-catalog img:not([src]) {
visibility: hidden;
}
</style>

<style>

.thumbnail-catalog img {

opacity: 0;

}

.thumbnail-catalog img:not(.initial) {

transition: opacity 1s;

}

.thumbnail-catalog img.initial,

.thumbnail-catalog img.loaded,

.thumbnail-catalog img.error {

opacity: 1;

}

.thumbnail-catalog img:not([src]) {

visibility: hidden;

}

</style>

Вот и все, пользуйтесь на здоровье!

По этой аналогии можно сделать и подгрузку картинок для галереи или брендов, заменив src на data-src в самих плагинах. Также возможно нужно дописать дополнительно стили и если понадобиться создать свои события в скрипте.

PS: при тестировании обнаружились проблемы: не работает в фильтрах и всплывающей корзине.

Продолжение следует…..

5 8 votes

Рейтинг постов

6 Комментарий

oldest

newest most voted

Inline Feedbacks

View all comments

Сергей

5 лет назад

Давно искал решение и вот нашел. Вот не понятно, а что это за раздел ? $(document).on(‘DOMNodeInserted’, ‘#product-core-image’, function() {

Ответить

ТеМаТуТ

Автор

Reply to Сергей

Это чтоб в сплывающем окне (Добавить в корзину) показывалась картинка, т.к. это модальное окно и в нем картинки с data-src то они не подгружаются автоматически. Или делать отдельную функцию на подгрузку изображений в модальных окнах или этот небольшой скрипт который меняет data-src на src.

Также недавно нашел еще один bug при загрузке на страницах с фильтром через динамическую подгрузку lazy — не отображаются картинки. Как решу эту проблемку выложу дополнительный скрипт для обработки изображений скриптом lazyload на динамически подгружаемых страницах сайта.

kenti4

Все работает, вот только во всплывающей корзине и когда пользуешься фильтром! Будут решения ? — чтобы работало везде. Я так понимаю этот скрипт нужно немного видоизменить.

Борис

4 лет назад

Супер, только вот где продолжение ?

Valnut

продолжения не будет ???

Влад

3 лет назад

А готовый плагин есть? Можно купить? А то сколько ищу не могу найти