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,520 points
7,861 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,840 points

Related Questions In Java-Script

0 votes
0 answers

How do you reverse a string in-place in JavaScript?

How do you reverse a string in ...READ MORE

May 23, 2022 in Java-Script by Kichu
• 19,040 points
495 views
0 votes
0 answers

How do I check if an array includes a value in JavaScript?

What is the quickest and most effective method to determine whether a JavaScript array has a value? The only method I am aware of is as follows: function contains(a, obj) { ...READ MORE

Sep 23, 2022 in Java-Script by Abhinaya
• 1,160 points
766 views
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,840 points
994 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,840 points
1,072 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,840 points
23,080 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,840 points
3,016 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,840 points
2,948 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,840 points
44,884 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,840 points
1,902 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,840 points
668 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP