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?

It is possible, but it depends on the caching settings of the client. If caching is turned off completely by the client, you'll have a doubled request count. (one for the attempt to preload an image, one for the actual display) (using Image) — Lekensteyn
– Lekensteyn, Commented Oct 13, 2010 at 14:42

Fenton · Accepted Answer · 2010-10-13 14:44:26Z

2

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.

answered Oct 13, 2010 at 14:44

Fenton

253k74 gold badges404 silver badges414 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pixel Over a year ago

But when my connection is slow user will see empty Image for a while. So I should load Image like this and set myActualImageOnPage.src = myImage.src

lincolnk Over a year ago

@pixel yes, he means to change the src on your real element during the onload method of your dummy image object.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related