The new Lazy Load is great but

Wappler General Need Help
1

So I have been trying to implement the new Lazy Load component on my pages and although it is easy to use on standard images it gets a little tricky when attempting to use it on the slideshow component.

I have a page with 10 images going down the page, when i refresh the page and look at the Network activity, I see the first 4 images are loaded and as I scroll down so the images start entering the network pane. So that is perfect, exactly what i want.

Now I add under all 10 images another column but instead of an image I add a slideshow with about 5 slides inside it. There is unfortunately no dynamic attribute option to add the Lazy Load component to the slideshow or the slides within. The Network inspector shows on refresh 4 images from the normal page as well as all 5 from the slideshow.

Anyone know of a way around this, I will admit I have already tried tricking it in many ways without success.

2

Hi Paul,
The lazy load component requires an <img> tag to be applied to, as it uses a special data-src attribute, instead of the standard src
It’s not possible to add lazy load to the slideshow.

Maybe we can just improve the slideshow component to preload the image only before showing it :slight_smile:

Another option would be to use the swiper instead. Inside the swiper you can use any html structure, so you can use plain images and therefore you can add lazy load.

3

Thanks @Teodor, I should have asked first before trying all this, haha.

Out of interest, and incase someone else think they are a smartass like me, and wastes time trying to trick it into submission, here is what I have tried so far.

 
Manually adding a class to the actual slides.

<dmx-slide class="lazyload" id="slide1" url="images/image1.jpg"></dmx-slide>
<dmx-slide class="lazyload" id="slide1" url="images/image1.jpg"></dmx-slide>

Does not work because the img tag this generates does not get the class

 
Manually adding a class the parent slideshow itself.

<dmx-slideshow id="slideshow1" show-nav="true" pause-on-hover="true" class="lazyload">
  <dmx-slide id="slide1" url="images/image1.jpg"></dmx-slide>
  <dmx-slide id="slide1" url="images/image1.jpg"></dmx-slide>

Does not work although the class is not dropped but it is not on the img tag

 
Then I got super duper smart and just left the default slideshow code as it was like this

<dmx-slideshow id="slideshow1" show-nav="true" pause-on-hover="true">
  <dmx-slide id="slide1" url="images/image1.jpg"></dmx-slide>
  <dmx-slide id="slide1" url="images/image1.jpg"></dmx-slide>
</dmx-slideshow>

And decided I need to add the class to the img tag, and I need to change src to data-src and add the data-sizes="auto" parameter. So I modified the dmxAppConnect/dmxSlideshow.js file from this

var o=document.createElement("img");o.setAttribute("src",e.url)

to this

var o=document.createElement("img");o.setAttribute("class","lazyload"),o.setAttribute("data-sizes","auto"),o.setAttribute("data-src",e.url)

Although this change actually did everything correctly to the img tag it unfortunately still did not work. But not to worry, I was not out of ideas yet.

 
Maybe I just needed to add a placeholder image to the src tag so it loaded that instead and would swap it out for me on scroll, so i tried this next.

var o=document.createElement("img");o.setAttribute("class","lazyload"),o.setAttribute("src","data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="),o.setAttribute("data-sizes","auto"),o.setAttribute("data-src",e.url)

Again it did add what I wanted to the img tag, but still did not work properly for lazy load

 
Moral of the story It took me an hour of trying for nothing, and @Teodor came up with a solution that works in about 5 minutes.

Thanks Teodor, much appreciated, I will try and stop playing with internal Wappler files in future. :wink:

4

Haha, nice try Paul, it’s just not meant to be used on elements different than images (img) tags.
Btw the data-sizes attribute is related to srcset images only, not to lazy loading single images.

I believe the slideshow component can be adjusted and some preload options can be added.
Maybe you can try using swiper with custom images inside and try if it works well :slight_smile:

1 Like
5

Thanks Teodor, at least nobody will ever say I did not give it a good try, lol.

Will let you know how it goes with the Swiper, but so far it looks like it is all going according to plan.

1 Like
6

By the way, this works perfectly with the Lazy Loader as a swiper rather than a slideshow exactly as you anticipated, even the srcset works. Thanks again @Teodor

1 Like