How do you cache an image in Javascript

Question

 I have two main questions:

1. How do you cache an image?
2. How do you use an image once it has been cached? (and just to verify, if an image is cached on page A, it is possible to call it from the cache to use it on page B, right?)

Also, is it possible to set when the cached version of the image will expire?

Answer 1

Hii @kartik,

You have to do three thigs:

1. You need to have a list of image URLs as object or array, for example:

   var sources = { lion: '/assets/lion.png', monkey: '/assets/monkey.png' };

2. Define the Function definition, where it receives list of image URLs and a callback function in its arguments list, so when it finishes loading image you can start excution on your web page:

          function loadImages(sources, callback) {
                var images = {};
                var loadedImages = 0;
                var numImages = 0;
                for (var src in sources) {
                    numImages++;
                }
                for (var src in sources) {
                    images[src] = new Image();
                    images[src].onload = function () {
                        if (++loadedImages >= numImages) {
                            callback(images);
                        }
                    };
                    images[src].src = sources[src];
                }
            }

        3.Lastly, you need to call the function. You can call it for example from jQuery's Document Ready

                    $(document).ready(function (){ loadImages(sources, buildStage); });

Hope it helps!!

Comments

Good example, but it answers only to point 1 of OP.