pre-loading images using Javascript

Question

I'm using Javascript to make a simple image viewer bar for my site (ASP.NET), I have 3 pictures displayed at each time and user can go to next or previous images using two buttons, also when users mouse overs on each picture, a larger version of the selected image is displayed on a separate DIV.

The only problem is that when users overs the images for the selected time, there is a delay before displaying the large image (as the big image is being loaded for the first time). how can I solve this problem? is there any way that I can initially load all large images (of course they should not be visible) what are my options?

Is there any way I can do it purely with javascript? I don't want to use jQuery

you should really begin learning jquery. there is no need to re-discover the wheel each time you build a website. — STT LCU
– STT LCU, Commented Dec 23, 2011 at 11:03

ThomasReggi · Accepted Answer · 2011-12-23 11:04:16Z

4

Create an element neer the end of the body like this <div id="preload"> set this div to display:none and place the images inside of it. Now when you use your gallery there shouldn't be a delay.

answered Dec 23, 2011 at 11:04

ThomasReggi

60.4k97 gold badges262 silver badges464 bronze badges

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

Comments

epignosisx · Accepted Answer · 2011-12-23 11:07:13Z

3

Another way using pure javascript is this one:

var img = new Image();
img.src = "url to image";

That's it! That will make the request to the server. You can do this for the rest of the images. If you want to know when it is finally loaded you could add the load event. For example:

img.onload = function(){
    alert("image ready");
}

answered Dec 23, 2011 at 11:07

epignosisx

6,2122 gold badges33 silver badges31 bronze badges

Comments

David Hellsing · Accepted Answer · 2012-02-28 22:11:17Z

2

You can do a simple preload function:

function preload() {
    while(arguments.length) {
        new Image().src = [].shift.call(arguments);
    }
}

Then use it like this, on domready or at the end of your document:

preload('img1.jpg', 'path/to/img2.jpg', 'img3.jpg');

This will make the browser load and cache the images. This might be better than placing them in a hidden DIV, since you will have full control of when the browser should start loading the images and potentially block download slots between the client and server.

edited Feb 28, 2012 at 22:11

answered Dec 23, 2011 at 11:09

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

Collectives™ on Stack Overflow

pre-loading images using Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related