Add large image grid example #12481

We'd like to have an example in Slint that shows a very large ("inifinite") grid of thumbnail images and demonstrates how to make such a grid scale. This can be built with a custom slint::Model and a ListView. We've done that before and could recycle some code there.

Original Description (was "Async lazy image loading")

I would love to have a component LazyImage for memory efficient image loading in long lists, that could be used like shown below. The idea is to keep only the images in memory that are visible on screen or with a defined offset and keep the whole visible/loaded/invisible/unloaded logic hidden. This might require a change in the renderer. I can think of something like this:

LazyImage {
    uri: @pathuri("/path/to/image.jpg");
    placeholder: @pathuri("/path/to/placeholder.jpg");
    preload-margin: 100px;
    auto-unload: true;
    loaded() => {
       //
    }
}

Explanation:

• uri should be a string, not ImageData to keep the footprint low, @pathuri converts a local path to a valid uri
• placeholder is an image, that is shown while the image is loading or on error
• preload-margin is the offset of the visible screen, when the image should start to load (x and y direction) - I think length values would be great to have, because percentage would be supported as well
• auto-unload frees the memory, as soon as the image leaves the visible area / offset - maybe this could be left out in favor of an lrucache solution
• loaded() - callback, when the image has been successfully loaded - could get ImageData as parameter, maybe error() and unloaded() callbacks would also be nice.

Later it might be possible to add group and group-size properties to determine how many images can be held in cache for a group. A group-size of 5MB would cache 5MB images before cleaning up the oldest data within the actual group.

This feature has already been discussed and related feature requests exist, that may enrich the discussion, but go in a different direction - I think that my approach is much more intuitive and less prone to errors.

• Async Image Loading #5140
• feat: convenient way to load/lazyload local/online images #4141

Product Impact

I'm trying to build slint in a low memory embedded device, while still having to provide image listings with pagination or infinite scroll.