5.1 Beta 2: Lazy loading images

Beta
#1

Hi!

I am noticing that if a slide contains an image, the image will load once the slide gets seen. While this is great for performance, it is not that great for UX. I believe that the loading should be offset for one slide.

What I mean is that the next available slide should preload before it gets seen. In case of carousel, the same would be true for both the first invisible slide to the left and right. All the other slides don’t need to load until they get into those closest hidden positions.

Thanks!

1 Like
#2

Good point here. I’ve updated this, but it is only guaranteed to work on the front end. The loading="lazy" attribute has been removed if an element is rendered inside of a Slide.

1 Like
#3

@alexander, ok, let’s see how it behaves.

I cannot visualize if that exactly addresses the issue I was describing. :slight_smile:

Images inside visible slides should lazy load while below the fold. Once they approach the viewport, they load. This is regular behavior.

What I mean is that also slides with --x-slide-distance of 1 should preload.

So once the user starts moving the slide, “distance 1” slides with images can enter the viewport preloaded. “Distance 2” and beyond can stay not loaded, until they reach distance 1.

Hope this makes sense and hope it’s doable. :slight_smile:

#4

I see what you mean. For the release I’m just going to keep it disabled all the time for any images inside a a Slide. From what I’ve looked at, it’s not that straightforward of a process to manage the loading attribute on the front end. I know this isn’t ideal for performance, but it will prevent layout shifts which will cause problems when using adaptive height slides.

2 Likes
#5

@Misho, I ended up coming back to this and finding a good compromise here. I have a hook where I’m checking if the slider is on screen. It’s used to pause autoplay, but was also helpful in this case. Here’s the final behavior:

  • All Images have loading="lazy" like normal. When those images are close to being on screen, the browser automatically starting loading them
  • When a slider enters the viewport, the loading="lazy" attribute is removed from all child elements. This means it will immediately start loading images from off screen slides
  • I found a way for anytime an image loads on the page at all to refresh adaptive height.

This should strike the right balance of initial page load performance and avoiding missing images that are found later in a slider.

1 Like