Ленивая загрузка изображений в галерее товара (lazy load). Есть решение


Добрый день! Подскажите пожалуйста, как отложить загрузку изображений в галерее товаров в виде слайдера, чтобы они подгружались по мере появления их в поле видимости.

2 ответа
  • Сергеев Владимир
    Разработчик
    Решение
    22 января 2020 18:19

    Здравствуйте, Максим! 

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

    Если вам это жизненно необходимо, я могу внести вам правки в тему на платной основе из расчёта 1500 руб./час.

  • Максим
    Решение
    23 января 2020 14:11

    Так себе поддержка, извините. 3 вопроса, в 3-х пришлось разбираться самому. Slick slider оказалось умеет это делать "из коробки".

    • Сергеев Владимир
      Разработчик
      Решение
      23 января 2020 17:01

      Это вы меня извините. =( 
      Я подумал, что вам нужно сделать ленивую загрузку изображений в списках товаров на главной, которые отображаются слайдером, а не в галерее изображений товара на странице товара

      На странице товара да – слик поддерживает.
      Вот что надо сделать в файле product.gallery.html 

      Найдите код:

      {$wa->shop->imgHtml($image, '750', ['itemprop' => 'image', 'id' => 'product-image', 'class' => 'zoom', 'style' => 'max-height:'|cat:$slider_height|cat:' width:'|cat:$slider_width, 'data-zoom-image' => $wa->shop->imgUrl($image, '970'), 'alt' => $product.name|escape ])}

      И замените его на код:

      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy="{$wa->shop->imgUrl($image, '750')}" itemprop="image" class="zoom" style="max-height:{$slider_height};width:{$slider_width};" data-zoom-image="{$wa->shop->imgUrl($image, '970')}" alt="{$product.name|escape}">

      Затем в этом же файле после строки:

      asNavFor: '.slick-nav-h{if $wa->get("quickview")}-quick{/if}, .slick-nav-v{if $wa->get("quickview")}-quick{/if}',

      Добавьте код:

      lazyLoad: 'ondemand',
      slidesToShow: 1,

Добавить ответ
Чтобы добавить комментарий, зарегистрируйтесь или войдите
Мы получаем и обрабатываем персональные данные посетителей нашего сайта в соответствии с официальной политикой.
Если Вы продолжите использовать сайт, мы будем считать, что Вас это устраивает.
Подписывайтесь и получайте скидки!

Узнавайте первым о скидках и специальных предложениях!