javascript preloading images - check whether an image is cachedloaded to prevent preload - Stack Overflow

admin管理员组

文章数量:1317915

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.

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.

• javascript
• image-manipulation

Share Improve this question Follow asked Oct 14, 2010 at 7:22 Jayapal ChandranJayapal Chandran 11.2k1414 gold badges6868 silver badges9191 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can check the .plete 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/Protocols/rfc2616/rfc2616-sec10.html

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.plete) { // 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.

本文标签： javascript preloading imagescheck whether an image is cachedloaded to prevent preloadStack Overflow