Preload images and prevent downloading same image multiple times in JavaScript-CodePudding

I'm building an Angular app which includes an image gallery. Basically an image and two buttons, previous image and next image. Below is some very minimal code for such a gallery (no Angular):

<html>
<style>
    img {
        display: block;
        height: 300px;
    }
</style>

<body>
    <img id="img"></img>
    <button id="prevB">Prev</button>
    <button id="nextB">Next</button>

    <script>
        var arr = [
            "https://firebasestorage.googleapis.com/v0/b/animaps-e8f7a.appspot.com/o/EugywRZ814yCMrMhopVF/3c.jfif?alt=media&token=d6ab88bc-5065-4dbc-ab9d-884a9af1380b",
            "https://firebasestorage.googleapis.com/v0/b/animaps-e8f7a.appspot.com/o/4KzYH8gMDjhKHFrTIXlB/1c.jpg?alt=media&token=9cd7bed2-c645-408c-acd5-77fdd9370389",
            "https://firebasestorage.googleapis.com/v0/b/animaps-e8f7a.appspot.com/o/ftGGK4Wj1ski8lJi1TRE/5a.jfif?alt=media&token=4a36d9c5-924f-4738-9851-cf057de74544",
        ]

        var index = 0;
        document.getElementById("prevB").addEventListener("click", () => {
            index--;
            document.getElementById("img").src = arr[index % arr.length];
        });
        document.getElementById("nextB").addEventListener("click", () => {
            index  ;
            document.getElementById("img").src = arr[index % arr.length];
        });
        document.getElementById("img").src = arr[index];
    </script>
</body>

Question 1: Why is the browser downloading the same image multiple times? Each time I click Prev or Next the image is downloaded again, even if it was already downloaded. Is there a way to instruct the browser to cache(save) downloaded images?

Question 2: Is there a way (Angular specific or pure JS) to preload the entire list of images? That is, download all the images when the page is loaded, and then instantly seeing the next image when clicking Next.

CodePudding user response：

Question 1: Why is the browser downloading the same image multiple times?

Most likely because you have the console open, and have disable cache selected. Either that or the backend is setting some sort of

Question 2: Is there a way (Angular specific or pure JS) to preload the entire list of images?

Sure - I would probably create the img elements in JS, and then just swap out your precreated images (rather than just toggling the src on the same image), so something like:

const createImg = (src) => {
     const img = document.createElement('img');
     img.src = src;
     img.id="img";
     return img;
 }
 
 var arr = [
            "https://firebasestorage.googleapis.com/v0/b/animaps-e8f7a.appspot.com/o/EugywRZ814yCMrMhopVF/3c.jfif?alt=media&token=d6ab88bc-5065-4dbc-ab9d-884a9af1380b",
            "https://firebasestorage.googleapis.com/v0/b/animaps-e8f7a.appspot.com/o/4KzYH8gMDjhKHFrTIXlB/1c.jpg?alt=media&token=9cd7bed2-c645-408c-acd5-77fdd9370389",
            "https://firebasestorage.googleapis.com/v0/b/animaps-e8f7a.appspot.com/o/ftGGK4Wj1ski8lJi1TRE/5a.jfif?alt=media&token=4a36d9c5-924f-4738-9851-cf057de74544",
        ].map(createImg);

        var index = 0;
        document.getElementById("prevB").addEventListener("click", () => {
            index--;
            const img = document.getElementById("img");
            img.parentNode.replaceChild( arr[index % arr.length], img);
        });
        document.getElementById("nextB").addEventListener("click", () => {
            index  ;
            const img = document.getElementById("img");
            img.parentNode.replaceChild( arr[index % arr.length], img);
        });
        img.parentNode.replaceChild( arr[index % arr.length], img);

#img {
    width: 400px;
}

<img id="img"></img>
    <button id="prevB">Prev</button>
    <button id="nextB">Next</button>