CODEWITHSUNDEEP
javascripthtmlimage
gga80
gga80

Reputation: 175

How to preload an image on my page without blocking OnLoad event?

I want my page to send a request for an image but I don't care when the image has finished downloading. This request should not block the OnLoad event from firing.

If I use inline javascript to add this image tag to the page before the page has been loaded, it seems that the browser waits until the image has finished downloading before firing OnLoad, which is not what I want.

Is there a way to make the request for the image without blocking the OnLoad event? I noticed in IE9 if I set the image element source but don't append it to the DOM, then the browser makes a non-blocking request (which actually seems like a bug since I haven't put the element in the DOM yet, some speculative download at work?). This doesn't behave the same in other browsers, though.

I also tried setting a small Timeout before appending the element but that didn't help.

Thanks.

Upvotes: 1

Views: 1003

Answers (1)

Golmaal
Golmaal

Reputation: 669

Have you given a thought to using "DOMContentLoaded" in place of onload? It is supported by all browsers and is already there in IE9.

And if you are targeting older versions of IE, you can use the readyState property.

I am not able to understand the whole point here, but by any chance, image element's own DOM events might be useful.

Upvotes: 1

Related Questions