Could someone explain how lazyloading works in Flynt?

[munts]

I have reviewed the lazysizes site and I have reviewed several examples. However, in all of my flynt projects, when I inspect elements and watch the Network tab while refreshing and or scrolling, I am not seeing the expected behavior of the 'lazyload' class changing to 'lazyloaded'. All of my images get rendered with the 'lazyloaded' class on page load.

When I view the examples on http://afarkas.github.io/lazysizes/#examples and watch the images in Dev Tools, I see the classes change as the images comes into view. I see this behavior when I review the https://bleech.de/

Then on the https://flyntwp.com/ site, I inspect the page and watch the very last image (Made by Agency People) and it initially loads with the 'lazyload' class, but within a second or two, it automatically changes to 'lazyloaded' before any scrolling takes place.

Lastly, when I review the code for the GridImageText component and several others, it uses the src attribute, but the lazysizes site says to use data-src.

So, is lazy loading actually working and or do I need to add something to get it work correctly?

Thanks,
Scott

[munts]

I wanted to add that when I run a Lighthouse Performance test, it appears that my page passes the 'Defer Offscreen Image' audit. So, perhaps it is working as intended.

[timohubois]

@munts thank you for question. Let me try to explain our current approach based on a snippet:

<img class="figure-image lazyload" // the class "lazyload" tells lazysizes that it should handle this image 
        src="{{ image.src|resizeDynamic(800) }}"
        srcset="{{ placeholderImage(800, 800 / image.aspect) }}" // placeholder image > 1. the browser will display this image first
        data-srcset=" // responsive image sizes > 2. lazysizes will put these into the srcset attribute and the browser will display one of these images
          {{ image.src|resizeDynamic(1920) }} 1920w,
          {{ image.src|resizeDynamic(1440) }} 1440w,
          {{ image.src|resizeDynamic(1320) }} 1320w,
          {{ image.src|resizeDynamic(1024) }} 1024w,
          {{ image.src|resizeDynamic(800) }} 800w,
          {{ image.src|resizeDynamic(600) }} 600w,
          {{ image.src|resizeDynamic(375) }} 375w"
        data-sizes="auto"
        alt="{{ image.alt|e }}">

I hope this helps for now?

[munts]

I think I understand and I am going to assume that it is working as it is intended. Thanks, Scott

[domtra]

@munts in addition to what @timohubois wrote:
the reason, why images are loaded after page load and not on scroll into view is the following line of code:

flynt/assets/main.js

Line 13 in c9d1c25

window.lazySizesConfig.preloadAfterLoad = true

We use this approach because from a visitor point of view, it does make sense to load images as early as possible when the browser is in idle.

As this is not the approach that native lazy loading takes, we decided in some projects to get rid of this line and might get rid of it in future versions of flynt. For now, this is the default but you can easily change that yourself.

Hope this helps.

[munts]

that helps. thank you.

[rajpatel2435]

Hi @munts
@domtra @jobvdmeer @szepeviktor

I just started working with flynt as my wordpress full stack project. How can you call the shortcode in your flynt project?

Any documentation or any example that you built using flynt?
Could you please help me?
Thank you

[szepeviktor]

@rajpatel2435 Here you go https://flyntwp.com/flynt-v1-4-pre-built-theme-shortcodes-wp-environment-support/