javascript preloading images - check whether an image is cached/loaded to prevent preload

Question

I have a few doubts which i am already sure of it but still want to be very precise about it.

If this is a duplicate question then please give me links so that i will delete this question and will refer the provided links

1. I need to preload few images. I dont want to preload if they already exists in the browser cache.

2. if we are preloading then we use the javascript code to preload which sends a request. also we have an img src for the same image in the html document. will the browser request for an image two times. one while preloading and other when it sees the img tag?

3. I hope both the preloading and img src processes are asynchronous. i hope that the resource and request taken when linking an image like obj.src = path and will be the same.

4. i hope preloading will not work like synchronous Ajax. that is by giving priority

5. is it possible to know whether an image is in cache so that we dont have to preload it.

6. am i missing few more questions? if so then please provide those answers so that the stack overflow users could update.

Just yes or no would be nice. if possible i would like to have some links to external reference or suggestions or an answser.

Thank You.

Answer 1

You can check the .complete attribute, it should mostly be true is image is cached.

If you preload them when they are cached, its not going to cause much network traffic.. Are you trying to save on memory?

You can do a head request via ajax and if it returns 304 instead of 200, it would mean its there in the cache.

Regarding References : http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

Answer 2

var preloadImgs = function(){
    var current, image_urls = ['image_one.jpg', 'image_two.jpg', 'image_three.jpg'], i, imgObj = new Image;

    for (i = 0; i < image_urls.length; i += 1) {
        current = (imgObj.src = image_urls[i]);
        if (current.complete) { // image is cached/loaded
          // do something with the cached/loaded image
        }
    }
};

"I need to preload few images. I dont want to preload if they already exists in the browser cache". It does not matter, preloading is assinging a url for the src property of the image object and it does the rest, if the image is already availble the next image is requested.