Pre Load images to display later on click event jQuery

Question

I have a web page where lots of images called from server using image scr attribute.

I have created a function like which is triggered by td click.

function GoToStep(stepNo) {
 var imgSrc = $("#h1" + stepNo).val();
        $(".img_vertical").css("background-image", "url(" + imgSrc + ")");
}

Now the problem is this. For slower connections the images come after some moment.

Can I pre load images to avoid waiting time when user clicks td?

I have seen some jquery function to pre load images.

Kindly give some idea how can I achieve it.

score 0 · Answer 1 · edited May 23 '17 at 12:20

This can be done using some javascript functions. Quoting from another question.

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

Explanation of how javascript preloaders work (different question)

[...] The way it works is simply by creating a new Image object and setting the src of it, the browser is going to go grab the image. We're not adding this particular image to the browser, but when the time comes to show the image in the page via whatever method we have setup, the browser will already have it in its cache and will not go fetch it again. [...]

So in your case, you should use something like

$(function() {
    // Do stuff when DOM is ready
    preload([
        'img/bg1.jpg',
        'img/bg2.jpg',
        'img/bg3.jpg'
    ]);
});

can you provide me some example as i created a hidden field for every td and kept the imge-scr in that hidden filed. — शेखर, Dec 08 '11 at 08:49
now how can i use preload by index? how can i set the background of the div if i have preloaded the images. Can you provide me the syntax for it. — शेखर, Dec 08 '11 at 08:58
After `preload()` has run, the images are preloaded. After you've run the function, you don't have to think about it anymore. — sshow, Dec 08 '11 at 09:47

score 0 · Accepted Answer · answered Dec 08 '11 at 08:16

0

Pre-loading an image is equivalent to loading an image but never displaying it. So, you can easily do it like this:

<img src="image.png" alt="" style="display:none;"/>

Now this image will be loaded as soon as the html starts rendering. Whenever you need to use this image as a display or background, just set the address to image.png and it will automatically be fetched from browser's cache.

answered Dec 08 '11 at 08:16

Nishchay Sharma

1,314
1
9
18

I think the page will be heavy(size) since I have at least 40 images on the page. I have to change the background-image of the same div on every td click. will it be a good idea to create a array of image on the page load and then change the image on td click. – शेखर Dec 08 '11 at 08:42
since you have to pre-load the images before displaying them, so the page has to be heavy. you can't stop it (even if you load them the normal way as the size is fixed afterall). either choose a better design for system or if it the best you can think, then try any of the pre-loading options discussed here. my answer is just the clue to do this, sshow's answer is better in the sense that it doesn't 'spoil' the DOM. – Nishchay Sharma Dec 08 '11 at 08:47

Pre Load images to display later on click event jQuery

2 Answers2