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):
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}}"
?
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}}">
I actually had this code in another SPA page. Did not notice the data- part until now.
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.