Lazysizes | window.lazySizesConfig.loadMode = 1; not working

New Member
2 0 0

Hi there,

 

I've read a lot of the topics in this Community about lazyloading and lazysizes. But unfortunately I just can't find the right solution for my Problem. We use lazysizes to lazyload the images on our shop. Although it generally works, we want to adjust the loadMode to 1, so that only visible images in the viewport get loaded (as Google requires). 

 

In the theme.liquid we have:

<script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>
<script>
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.loadMode = 1;
</script>

But it still loads a lot of images far beneath the fold of the viewport… 

 

Any ideas?

Will be happy for any tip :-)

 

Thanks in forward!

0 Likes
Shopify Expert
2674 65 665

You should set the variables before referencing the file:

<script>
  window.lazySizesConfig = window.lazySizesConfig || {};
  window.lazySizesConfig.loadMode = 1;
</script>
<script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>

https://github.com/aFarkas/lazysizes#js-api---options:

Options can be set by declaring a global configuration option object named lazySizesConfig. This object must be defined before the lazysizes script. A basic example:

 
Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
1 Like
New Member
2 0 0

Thank you tim!

 

I already adjusted the code, and set the variables before the reference in theme.liquid.

<script>
    window.lazySizesConfig = window.lazySizesConfig || {};
    lazySizesConfig.loadMode = 1;
</script> <!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script><!--<![endif]--> <!--[if lte IE 9]><script src="{{ 'lazysizes.min.js' | asset_url }}"></script><![endif]--> <script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>

 

Unfortunately, it still loads some of the images not in the viewport…

Bildschirmfoto 2019-09-27 um 07.21.10.png

 

And looking at the loaded HTML (without scrolling) some of the items already have a "lazyloaded" instead of "lazyload" class…

<div class="grid-product__image-wrapper">
      <a class="grid-product__image-link" href="/products/white-surfboard-front-pad"><!-- product.url| within: collection-->
         
 <div class="reveal">
<style>...</style>
          <div id="ProductImageWrapper-11497318842421" class="product--wrapper">
            <div style="padding-top:100.0%;">
              <img class="product--image ProductImage-11497318842421 lazyautosizes lazyloaded" src="//cdn.shopify.com/s/files/1
...

 

Whereas the other Items further down have "lazyload"

<div class="grid__item one-half medium--one-half large--one-half collection-collage__item text-center">
  <a href="/collections/dry-bags" class="collection-grid__item-link collection-collage__item-wrapper">
 <noscript>…</noscript>
<div class="collection-grid__item-overlay grid__image lazyload" 
...

Seams like the loadMode is not working for any kind of reason…

 

Happy for any help :-)

Thanks in advance!

 

0 Likes
Shopify Expert
2674 65 665

I'd say it's by design:

The loadMode can be used to constrain the allowed loading mode. Possible values are 0 = don't load anything, 1 = only load visible elements, 2 = load also very near view elements (expandoption) and 3 = load also not so near view elements (expand * expFactor option). This value is automatically set to 3after onload. Change this value to 1 if you (also) optimize for the onload event or change it to 3 if your onload event is already heavily delayed.

If you really want to prevent loading past fold, I had success with  expand and (probably) expfactor, resetting them to reasonable values after onload, or on scroll...

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
1 Like