Dynamic Lazy Load Images Inside Repeat in SPA page

Wappler General How To
#1

Hi.

I have an SPA page with a repeat. The data source of the repeat has image name in the data set.
This repeat has an IMAGE with dynamic lazy load value set as below.
dmx-lazyload-dynamic="https://website.com/images/thumb_{{queryImage.ThumbnailURL}}"
On page load, the src is blank and no images get rendered.

I also tried just setting lazyloaded as class to the img tag inside repeat, but it still didn’t work.
Then, I tried removing the dynamic lazy load property and put in simple dmx-bind:src. In this case, images are showing, but none of them lazy load.
dmx-bind:src="https://website.com/images/thumb_{{queryImage.ThumbnailURL}}"

How do I setup lazy load on the images inside this repeat?
Page link (scroll to “you may also like” section for the repeat):

#2

I don’t know if it makes a difference if it’s an SPA, but have you tried:
dmx-lazyload-dynamic="" dmx-bind:src="https://website.com/images/thumb_{{queryImage.ThumbnailURL}}"
?

#3

Did not make a difference. :slightly_frowning_face:
Images still loading on page load itself.

#4

Turns out, using data-src instead of just src works.
So right now its set as:
<img dmx-lazyload-dynamic="" dmx-bind:data-src="https://website.com/images/thumb_{{queryImage.ImageURL}}">

1 Like
#5

Sorry - that’s what I had used too. I copied your dmx-bind attribute and didn’t notice it was missing the ‘data-’.

1 Like
#6

I actually had this code in another SPA page. Did not notice the data- part until now. :sweat_smile:
So, if you would have put in the data- part, I probably still would have read it wrong and replied saying it doesn’t work.

#7

hi hi… just a question could one use the lazy load with

dmx-style:background-image="url(uploads/thumbs/{{image_file}})"

or will it require dmx-bind:data-src=

#8

Don’t think it will work on background image.