Is It Possible To Insert Images In Cache Before Rendering

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 mouseove

Solution 1:

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.

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

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

preloadImages(imageSrcs);

Solution 2:

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

Solution 3:

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.