Lazy Loading

Topic: Lazy Loading

jseird pro premium priority asked 10 months ago

Expected behavior

Images to load when scrolling a List Group within a container (name it scrollbox here) of fixed height and .overflow-auto class applied on it.

Actual behavior

While the group-list inside scrolls correctly only the first images are shown correctly, meant the final image replaces the placeholder. For other images that are not visible at the beginning only the placeholder is displayed. This indicates the lazy loading is applied correctly. Scrolling within the scrollbox container does not trigger the load of the final image for other images. However if scrolling up or down on the hole site (website that contains the scrollbox container) even slightly by 1 pixel up or down the images inside the scrollbox are show correctly, their final image is displayed respectively.

Add comment

Grzegorz Bujański staff answered 9 months ago

1 0 Best answer

Add data-mdb-lazy-load-init to the ul element. This should solve the problem.

Add comment

Kamila Pieńkowska staff answered 10 months ago

0 0 Best answer

Can you prepare an example snippet for me to look into?

jseird pro premium priority commented 10 months ago

https://mdbootstrap.com/snippets/standard/uniqueopia/5935353

Add comment

dwightray answered 9 months ago

0 0 Best answer

It seems like you're experiencing some issues with lazy loading images within a scrollable container. The expected behavior is for images to load as you scroll down the list group, but only the first images are displayed correctly while the rest show as placeholders until the page is scrolled slightly up or down. Have you checked if there are any specific settings or configurations related to lazy loading or image rendering that might be causing this behavior?

jseird pro premium priority commented 9 months ago

Seems related to viewport or so - Grzegorz Bujański answer is working just fine.

Add comment

David Smith answered 9 months ago