Preloading image gracefully in Javascript (without any JS library)?

Question

I have an image with set src attribute.

I would like to replace image, but connection with the server is slow and time that it takes to load a new image is not negligible.

Is there possibility to create internal Image object, set kind of "onLoadListener" on it, load an image and then set it to original image src attribute?

Answer 1

You can pre-load images in JavaScript like this...

myImage = new Image();
myImage.onload = function () { alert("Loaded"); };
myImage.src = "logo.gif";

You can put the logic to pop the image on the page instead of alert-ing.