How do I LazyLoad thumbnail images in Debut?

[SeaSpray]

I've gotten LazyLoad to work on my other pages except product-template.liquid thumbnail section.

        <div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} thumbnails-slider--active{% endif %}">

          {% if enable_thumbnail_slides == true %}

            <button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}">

              {% include 'icon-chevron-left' %}

              <span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>

            </button>

          {% endif %}

          <ul class="grid grid--uniform product-single__thumbnails product-single__thumbnails-{{ section.id }}">

            {% for image in product.images %}

              <li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item js">

                <a href="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"

                   class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"

                   data-thumbnail-id="{{ image.id }}"

                   {% if enable_zoom %}data-zoom="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>

<img class="product-single__thumbnail-image lazyload" data-src="{{ image.src | img_url: '110x110', scale: 2 }}" alt="{{ image.alt | escape }}">

                </a>

              </li>

            {% endfor %}

          </ul>

          {% if enable_thumbnail_slides == true %}

            <button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}">

              {% include 'icon-chevron-right' %}

              <span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>

            </button>

          {% endif %}

        </div>

      {% endif %}

An example:  https://seasprayjewelry.com/products/6mm-5-freshwater-pearl-bangle-bracelet

Can someone help me out with this?

Thanks

[oreoorbitz]

The images have lazyloading enabled already.

[SeaSpray]

When I use the Google PageSpeed Insights for 

https://seasprayjewelry.com/products/sterling-silver-freshwater-pearl-solitaire-ring

I get Defer Offscreen Images 

So the lazyload I put in isn't working.

Any suggestions?

Thanks

[Anonymous · Accepted solution]

Hi SeaSpray, 

Aibek is here from Growavelabs Agency. 

Hope this message finds you well and safe. 

First, you use lazysizes.js to defer loading of hidden images. The problem is that this library thinks the images are in the visible area of the web page. Therefore, the pictures are loaded immediately. But in reality they are hidden from the side. When users click on product thumbnails, the images are shown. The Pagespeed Insights algorithm can figure this out.

Alternatively, you can manually adjust the lazysizes. To do this, you need to lower the expand option. Below will be the code, try to paste immediately after connecting the js file lazysize.js to theme.liquid

window.lazySizesConfig = window.lazySizesConfig || {};

window.lazySizesConfig.expand = 10; //default 360-500 lazySizesConfig. expFactor = 1.5; //default: 1.7

If you have other questions, our developers can help you with that. Our agency is now offering free speed optimization for the Shopify Stores. 

Feel free to fill out this form, and we can help you with your other requests. Link you can find here: https://mailchi.mp/f33da12dcb76/optimize-my-website