Lazy loading images?

[ed2050]

Question

Does anyone have a good approach for lazy loading images with nicegui? Built-in method doesn't seem to work.

I'm using ui.image which maps to Qimg. Passing the loading=lazy flag:

for imgurl in gallery : 
    ui.image (imgurl).props('loading=lazy')
# imgurl points to a local dir mapped with add_static_files
# each gallery page has potentially hundreds of images

Loading=lazy is Qimg's default, and generated image tags have <img loading=lazy> attribute even without passing props. Browser fetches all images on page load, according to Network activity in dev tools. So flag seems useless.

[falkoschindler]

Strange. This is working for me (macOS, Chrome):

for i in range(100):
    ui.image(f'https://picsum.photos/id/{i}/300/200').classes('w-64')

Additional images are being loaded while scrolling towards the bottom of the page.

[ed2050]

@falkoschindler Interesting, thanks. Hard to diagnose browser behavior. Chrome uses several factors to determine when to load images. Mine seems to load far more than 3000px ahead.

Out of curiosity, what do your generated <img> tags inside q-img container look like? Mine are like this, wonder if there's any difference:

<img class="q-img__image q-img__image--with-transition q-img__image--loaded" 
loading="lazy" fetchpriority="auto" aria-hidden="true" draggable="false" 
src="/images/660053.jpg" style="object-fit: cover; object-position: 50% 50%;">

I do get lazy loading when viewing static web pages. So something particular to quasar / nicegui / fastapi setup seems to be throwing things off? Don't know what else it could be.

Hoping for a simpler solution than an infinite-scroll type thing to detect end of content and put more images on the page...