Lazy Loader src and data-src attributes getting out of sync

Wappler General Bugs
1

Video attached with demonstration

Page fetches a data query which is filtered directly on the search box on the page
All data is cofretly upadted except the lasy laoder component.

basically after applying a filter to a data query, the data-src attribute seems to be updated but the plain src remains with an old value

for example:
<img class=“img-fluid rounded lazyloaded” data-src="/roomimages/4117/560/mid/Disabled-access2.png" src="/roomimages/6781/585/mid/Gold15.jpg">

Video attached

lazyloaderissue.mp4 (18.2 MB)

website: https://www.bookastudentroom.com/
Any solutions appreciated

2

Hi Brian,
Please make sure you are using repeat children region for your data and you selected a value in the Key field in the UI (for the repeat children).

3

Thanks again @Teodor, will investigate and report back

4

@Teodor Please can you help me with this one, really having problems

Currently my code section for the swiper is this. The data displays correctly but the images get out of sync when a filter is applied.

image
image.png357×758 18.3 KB

If i add a repeat children to the parent row,

image
image.png398×806 34.2 KB

the page just displays the loading message until eventually the page times out

image

and chrome throws an error.

image
image.png747×304 4.4 KB

5

Ah sorry didn’t see you were using the swiper.
You should be using the dynamic options in the swiper and not wrap it with a repeat region.

We are going to check this.

6

Thanks @Teodor 500 hours into the project which was basically built around the Swiper component and Lazyloader and 1 week after go live this is spotted.
I did warn the customer it was not ready, not fully tested and still had a few glitches and data was lacking (they have only uploaded 390 room prices of 10,000) but they were impatient

9

I’m not sure if the Swiper is going to like 10000 slides, it is all created in the DOM and will probably become very slow. The original Swiper plugin has support for virtual slides, perhaps we could implement that (http://idangero.us/swiper/api/#virtual). I’m updating the swiper to fix the src issue.

I notice that you load all rooms directly, why do you reload again for the filter? If you already have all rooms, why not use them and filter directly cient-side. You can use a Data View for that.

1 Like
10

Thanks @patrick, src issue fix will be most welcome
As to 10,000 slides, watching the performance carefully as like you, i am doubtful it can handle that number.
Plan B, if performance dips too much, is limit the number of of rooms returned using a paged query (say 1000 or so max)
The rooms are randomised via a separate routine regularly, so swiper choice will also change so no advertiser is disadvantaged due to location or position in the alphabet etc
That is the main reason for the full reload, if i have to do that, which i am fairly confident i will have to, the full dataset wont be loaded only a subset so cant be filtered at client side.
So basically forward planning is the answer i suppose.

Virtual slides looks very interesting

Thanks for all your help, brilliant as always

EDit. Got me thinking now, maybe full data load then client side filter would work as the swiper would only be applied to the subset.