javascript - Is it possible to insert images in cache before rendering - Stack Overflow

admin管理员组

文章数量:1279185

I have this webpage which shows me some images and some images are on a mouseover event and hence it takes time for them to display. I have worked it around by placing the mouseover image and hidding them through display none property which puts them in browsers cache and display them quickly on mouseover.I was thinking that is it possible to insert the images into cache of a browser by another way like using jQuery or something so i dont have to put images in hidden form.

I dont know if this is a stupid question.

Please ment.

Regards Himanshu Sharma

I have this webpage which shows me some images and some images are on a mouseover event and hence it takes time for them to display. I have worked it around by placing the mouseover image and hidding them through display none property which puts them in browsers cache and display them quickly on mouseover.I was thinking that is it possible to insert the images into cache of a browser by another way like using jQuery or something so i dont have to put images in hidden form.

I dont know if this is a stupid question.

Please ment.

Regards Himanshu Sharma

• javascript
• jquery
• html
• caching

Share Improve this question Follow asked Jan 12, 2012 at 7:10 techie_28techie_28 2,13344 gold badges4343 silver badges6464 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

You can preload images which will cause them to be in the cache so they are available immediately for things like mouse events. See this post for sample code that pre-caches an array of images.

function preloadImages(srcs) {
    if (!preloadImages.cache) {
        preloadImages.cache = [];
    }
    var img;
    for (var i = 0; i < srcs.length; i++) {
        img = new Image();
        img.src = srcs[i];
        preloadImages.cache.push(img);
    }
}

// then to call it, you would use this
var imageSrcs = ["src1", "src2", "src3", "src4"];

preloadImages(imageSrcs);

You can just use (new Image).src="http://path/to/img.jpg" which will make the browser load it

First of all, use sprites for small and/or 'mouseover' images. Also, yes, you can preload images with javascript, but remember about page load sequence, so it might not be faster then css.

本文标签： javascriptIs it possible to insert images in cache before renderingStack Overflow