Eager loading to the fisrt image on a slider loop, rest as "lazy"

How To
1

On a slider with around 20-30 full width images (~150kb each image after compression, on desktop display) I plan to add “eager loading” to the first slide image (and maybe the second) and then let the rest as “lazy”.

The slider is generated from a loop query, there is only one img element, so I can only set “lazy” or “eager” and will apply to all slides. I dont’ see the way to apply different values for slides beyond 2 or 3.

Do you have any idea about how to address this?

Also if I set all the slides as “eager loading”, will this slow down the rest of images of the page?

2 Likes
2

I’m facing the exact same problem and hope someone has an idea on how to do this!

I’m using an ACF gallery field for the slider and need to add an attribute data-spai-eager="true" to only the in the first slide.