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

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (6 оценок, среднее: 5,00 из 5)
Загрузка...

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

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

на

Теперь все ссылки на изображения будут формироваться с 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\ваша-тема\)
Добавляем в файл строку

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

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

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

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

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

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

5 2 votes
Рейтинг постов

Опубликовано: 11.02.2019 в 14:02

Subscribe
Notify of
guest
6 Комментарий
oldest
newest most voted
Inline Feedbacks
View all comments
Сергей

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

kenti4

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

Борис

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

Valnut

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

Влад

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

6
0
Would love your thoughts, please comment.x
()
x