`enhanced-img` should not delay JavaScript loading until after all images have finished loading

[OOPS-Studio]

Describe the problem

Currently, any <enhanced:img> tags that are initialized with the component will have their images loaded before the component's own JavaScript. This means that the page is completely unresponsive until the very last image finishes loading. Combine this with prerendering and the user will be shown a completely-rendered page with buttons and everything - but clicking a button will do nothing because that one image way off the bottom of the screen hasn't finished loading yet.

Delaying the creation of the <enhanced:img> tag solves this problem. For example, by placing them inside an {#if mounted} block and then onMount(() => mounted = true);. Doing this lets the JavaScript load before starting to load the images, but doing so removes the ability to reserve space for the images, which is one of the largest advantages of enhanced-img. Since the images aren't prerendered into the HTML, it causes the page to render without them. Then the mount occurs and the images appear and you get a massive content shift.

There needs to be some way to have an <enhanced:img> in a component's markup without also making that component's JavaScript wait to load until after the image finishes. The browser-native <img> tag does not block the loading of JavaScript. <enhanced:img> shouldn't either.

Describe the proposed solution

Do one of the following:

1. Make <enhanced:img> replicate the browser-native <img> tag's loading behavior (this is the preferred solution)
2. Make <enhanced:img>s not start loading until after all JavaScript finishes
3. Allow both the <enhanced:img>s and JavaScript to load at the same time (instead of blocking JavaScript entirely in favor of the images)
4. Allow the developer to choose whatever works best for their page

Alternatives considered

No response

Importance

would make my life easier

Additional Information

I love enhanced-img, but this is enough to make me remove it from my project and implement image optimization manually. It is simply unacceptable to have my entire page be unresponsive for 10+ seconds on slow connections. There's no reason a 2kb JavaScript file needs to wait for 1mb of images to load first.

Not only does this make the page unresponsive for large amounts of time, but it also makes trying to apply JavaScript to the images while they load impossible. For example, if I want to display a loading icon over the images while they load and then remove them after each one finishes - this is simply impossible to do. Instead, all the loading icons will remain on all the images (even the ones that have already finished loading) for the entire duration of the page load, only to then all disappear at the same time after the final image loads. It's unusable.