How do you cache an image in Javascript

0 votes

 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?

Jun 2, 2020 in Java-Script by kartik
• 37,510 points
1,432 views

1 answer to this question.

0 votes

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!!

answered Jun 2, 2020 by Niroj
• 82,720 points

Related Questions In Java-Script

0 votes
1 answer

How do I check if an element is hidden in jQuery?

Hello @kartik,  You can use CSS: class .hide { ...READ MORE

answered Jun 8, 2020 in Java-Script by Niroj
• 82,720 points
139 views
0 votes
1 answer

How do I select an element with its name attribute in jQuery?

Hello @kartik, You can use: jQuery('[name="' + nameAttributeValue + ...READ MORE

answered Jun 11, 2020 in Java-Script by Niroj
• 82,720 points
139 views
0 votes
1 answer

How do I embed PHP code in JavaScript?

Hello @kartik, If you have individual .js files, and you ...READ MORE

answered Jul 7, 2020 in Java-Script by Niroj
• 82,720 points
597 views
0 votes
1 answer

How do I include a JavaScript file in another JavaScript file?

Hello @kartik, It is possible to dynamically generate ...READ MORE

answered Jul 27, 2020 in Java-Script by Niroj
• 82,720 points
145 views
+1 vote
1 answer

How to make anchor tag with routing using Laravel?

Hey @kartik, First you have to go to ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,720 points
7,170 views
0 votes
1 answer

What is redirection in Laravel?

Named route is used to give specific ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,720 points
819 views
0 votes
1 answer

How to install Laravel via composer?

Hello, This is simple you just need to ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,720 points
638 views
+1 vote
1 answer

What are named routes in Laravel and How can specify route names for controller actions?

Hey @kartik, Named routing is another amazing feature of ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,720 points
7,586 views
0 votes
1 answer

How do you access the matched groups in a JavaScript regular expression?

Hello, Here’s a method you can use to ...READ MORE

answered May 28, 2020 in Java-Script by Niroj
• 82,720 points
328 views
0 votes
1 answer

How do you get a timestamp in JavaScript?

Hello @kartik,  Use this: +new Date I also like this, ...READ MORE

answered Jul 27, 2020 in Java-Script by Niroj
• 82,720 points
85 views