jQuery preload images before animation

Question

I have a <img> placeholder where I want to show images using a slideshow effect:

<img rel="preload" class="home-postcard" src="/img/Rsquare1.jpg" />

I am running this JS script:

var iloop = 0;
window.setInterval(function () {
    var dataArray = new Array("/img/Rsquare2.jpg", "/img/Rsquare3.jpg");
    $("img.home-postcard").fadeOut("fast", function () {
        $(this).attr("rel", "preload");
        $(this).attr("src", dataArray[iloop]);
        iloop++;
        if (iloop === dataArray.length) {
            iloop = 0;
        }
        $(this).fadeIn("slow");
    });
}, 10000);

The animation works, but images keep downloading from the network over each iteration and it consumes bandwidth.

I tried to preload the images using rel="preload", but they keep downloading each time the src is rewritten.

What am I missing?

Note: I previously tried this preloading method but images keep downloading whenever the src attribute is rewritten. Preloading images with jQuery

Note 2: rel="preload" is referenced as a potential method: https://developers.google.com/web/updates/2016/03/link-rel-preload

Normally the images are stored inside the browser's cache - unless you've deactivated it. — obscure, May 22 '19 at 19:16
I think I do have browser cache set up, although I don't see any mention of caching in console>network. My root web.config has `` — Alfred Wallace, May 22 '19 at 19:20
you could try to load the images each in its own `` and hide/show them on the loop... but that may not be the best solution if you have many images... — DIEGO CARRASCAL, May 22 '19 at 19:29
@obscure - you are right!! My bad, I had `Disable cache` checked in the Console. Please post an answer and I'll accept. — Alfred Wallace, May 22 '19 at 19:30
@DIEGOCARRASCAL - thanks, but I'd prefer not to hardcode filepaths in the body. — Alfred Wallace, May 22 '19 at 19:33
@AlfredWallace what I meant was to create new DOM elements in the script, append them to the body and show and hide them as you required... — DIEGO CARRASCAL, May 23 '19 at 15:46

score 1 · Accepted Answer · answered May 22 '19 at 19:47

External content - such as images - is downloaded to the browser's cache and for subsequent requests loaded from there instead of being re-downloaded. The only exception to this is if the browser's cache has been deactivated manually - or maybe if it's full.

The following simple example illustrates this. I'm using the setInterval function to update an img element with two images out of an array every two seconds. If you open the developer tools of your browser and take a look at the 'networking section', you'll notice that even though the slideshow might have run for a minute yet there are just two http requests for the pictures.

var images = ["https://picsum.photos/id/815/200/300", "https://picsum.photos/id/835/200/300"];
var counter = 0;

function update() {
  var img = document.getElementById("myImg").src = images[counter];
  if (counter + 1 < images.length) {
    counter++;
  } else {
    counter = 0;
  }
}
var interval = setInterval(update, 2000);

<img id="myImg">

jQuery preload images before animation

1 Answers1