Lazy load image on Slider Move

[derWebdesigner]

Dear community,

I just implemented lazy loading for my image slider and I was wondering if there is an option to load the next image a bit earlier than loadOnTransitionStart because this results in the effect that I can drag the slide to the side and the image won't be loaded until I release the drag state.

The Airbnb app is a great reference where the image gets loaded as soon as the next slide is a few pixels in the viewport, no matter if I still drag the slider or not. This is extremely efficient because I don't load the next image immediately without needing it and it feels super fast and responsive.

Or is there maybe a way already to implement that myself by manually firing the lazy loading for the next slide when the slide becomes visible?

Thank you very much in advance,
Manuel

[meotimdihia]

I did something like this:

    const transitionEndEvent = (event) => {
      // remove loading lazy
      const els = document.getElementsByClassName("swiper-slide-next")
      if (els.length > 0) {
        const imgEls = els[0].getElementsByTagName("img")
        for (const imgEl of imgEls) {
          imgEl.setAttribute("loading", "eager")
        }
      }
    }

Edit: It looks like it doesn't work well for now.

[muhammedalibilgin]

I'm facing the same issue and I'm curious about the solution.
i.e. is there any chance to load the next image a little earlier when we are lazy load?

[derWebdesigner]

I am honestly not even sure how it works now with the latest version where lazy loading was removed in favor of lazy loading via the browser (which feels like a questionable decision for me when I see how early Chrome on the web loads images and I have 0 control over when an image is loaded). For this reason, I didn't update the Swiper yet.

[meotimdihia]

It is strange when the most popular package was released 10 years ago but has not addressed this problem yet.
It proves how hard it is to build Slide 1 to 1 on mobile phones.

[derWebdesigner]

I guess the biggest issue for such a slider library is that everybody wants more and more features because the requirements are so different for each project. But I was also already thinking of somehow developing a light version myself just because there must be a way to make this "feel" better. Airbnb did a great job but that's also a very high bar when it comes to interactions like that.