Home/ Questions/Q 1088079
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T23:01:27+00:00

I’m using javascript to dynamically load any of a series of images into a

  • 0

I’m using javascript to dynamically load any of a series of images into a single img tag, based on user interaction:

function reassignImage(newSource)
{
   img.src = newSource;
}

This works great, except that I when I inspect it with Chrome developer tools,
I see that even if I reload an image I’ve already loaded, it makes another http call AND grows the total Images Size graph.

This seems like the worst of both worlds. I would want either:

  1. To load from cache if the image were
    the same.
  2. To reload each image
    everytime, but then not grow the
    cache.

How would I achieve either scenario?

Thanks! Yarin

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This will pre-load an image so that the browser can display it immediately when you actually set the src of an img tag. I speculate that pre-loading an image like this will ensure it’s in the cache so it won’t reload, though I haven’t tested it.

    var myImg = new Image(25, 25);
myImg.src = "/foobar.png";

    In other words, this should now hopefully only download two images

    function reassignImage(newSource) {
    var myImg = new Image(25, 25);
    myImg.src = newSource;
    img.src = newSource;
}

reassignImage("first.png");
reassignImage("second.png");
reassignImage("first.png");

    Edit

    I was doing it wrong. Try creating a new Image() for every new file the user loads. Swap these image elements in and out of the dom.

    <html>
  <head>
    <script>
    var imageElements = {};
    function reassignImage(newSource) {
      if (typeof imageElements[newSource] == "undefined") {
        imageElements[newSource] = new Image();
        imageElements[newSource].src = newSource;
      }
      var container = document.getElementById("imageContainer");
      container.innerHTML = '';
      container.appendChild(imageElements[newSource]);
    }
    </script>
  </head>
  <body>
    <div id="imageContainer"></div>
  </body>
</html>
    • 0