Most efficient way to create an image player/animation

Panel
1

My project involves creating high-resolution satellite imagery, where each image is approximately ~10mb (webp format). Essentially the user selects a time range, and then based on the available data files, it can create an x amount of images. What I am looking to do is serve those images back to the user with Panel and create an image player.

This works by using the built in image player or a slider to target each image, but I am unsure of how to preload the images to reduce load time between each image. Essentially I want the transaction between images to be as seamless as possible (so the user can animate the image array), but my current implementation each image is loaded and creates this ~1 second buffer between showing images. Is there a proper way to do this in Panels that I am unaware of? Are my images just too big for this to be realistic?

2

I think I built this a long while back :slight_smile:

For the bare minimum:

Then, I’d suggest pre-populating the tabs with a placeholder, like pn.indicators.LoadingSpinner.

When the tab’s active is changed, check if the tab’s objects is a placeholder; if so, create a new priority job to load the actual image.

In the background, you may use pn.state.add_periodic_callback to start loading images one by one.

1 Like