LazyLoad images option for Slider Block.

[Brandonbr1]

What problem does this address?

When I make an image using Otter "slider block", it does not add loading="lazy" or loading="eager" tags to indicate how it should be loaded. Say for instance, we have a slider that's more to the bottom of the page and can't be seen until we scroll down decently far below the page lazy loading would be perfect. Or if the image is closer to the top, it should use loading="eager". Adding both of these options depending on where the slider is can increase FCP and page speed scores.

Example for lazy loading:

<img loading="lazy" decoding="async" class="wp-block-themeisle-blocks-slider-item" src="imageurlhere" data-src="imageurlhere" alt="" title="" data-id="362">

Eample of eager loading

<img loading="eager" decoding="async" class="wp-block-themeisle-blocks-slider-item" src="imageurlhere" data-src="imageurlhere" alt="" title="" data-id="362">

Docs about this

Mozilla Lazy Loading Explanation on the differences between the two

What is your proposed solution?

We can simply have 2 checkboxes. One asking if you want lazy load [x] or eager loading [x] for the image. If one of these is checked, we apply the respective image tag. If none is selected however, we don't apply any image tag and leave it with no tag.

Will this feature require documentation? (Optional)

Yes, it requires documentation.

Thanks, Brandonbr1

[ineagu]

Thanks! I think is best for an image optimization plugin to handle that.