A simple way to preload an enhanced:img

Describe the problem

I have some large images on my site which are locked behind a button press but are not on a separate page. Because the images aren't rendered until the button is pressed, there is a delay after clicking the button before the image can be seen. So, I want the images to be preloaded. However, preloading images with multiple sources is quite messy, especially if those sources use multiple file types, and currently SvelteKit does not have a built-in way to handle this. I would imagine this would be a common issue for developers to run into, so rather than each developer having their own implementation, it would be very useful for SvelteKit to provide a way to handle this.

Describe the proposed solution

The simplest solution to use as a developer would be a preload property on the <enhanced:img/> element. However, this would need to be handled during preprocessing rather than when the element is rendered, which could be unintuitive.

A more intuitive solution would be a separate element (e.g: <preload:img>) which you use outside of any conditional blocks; this element should give a warning if no <enhanced:img/> with a matching src is found.

With both solutions, there would need to be a decision on how to handle multiple file types. I've identified three possible solutions and presented them in the below table. I personally think all of these options should be available, and the developer should get to choose between them based on the size of the images and how they are being used.

Alternatives considered

Manually preloading each src and using my own implementation

Importance

nice to have

Additional Information

No response

The entry point is enhanced:img preprocessing; start by reviewing how it handles multiple sources and how conditional rendering affects generated output. Done means an agreed preload API, a defined strategy for multiple file types, and matching-source warnings if that approach is selected.