I want to refresh images in a page and in case the image gives me error loading i want to revert to the old cached image.
Can anyone help me?
Thanks.
var curtime = new Date().getTime();
var arrayimg = ["https://www.learningcontainer.com/wp-content/uploads/2020/07/Sample-JPEG-Image-File-Download.jpg?" + curtime, "https://upload.wikimedia.org/wikipedia/en/9/95/Test_image.jpg?" + curtime, "https://testimages.org/img/testimages_screenshot.jpg?" + curtime];
var arrayimgLoad = [1, 1, 1];
var arrayimgOLD = ["", "", ""];
var myVar = setInterval(function() {
myTimer()
}, 1000);
function myTimer() {
arrayimg.forEach(imageupdate);
}
function imageupdate(element, index, array) {
imgname = "img" + index;
if (arrayimgLoad[index] == 1) {
arrayimgOLD[index] = document.getElementById(imgname).src;
document.getElementById(imgname).src = element + new Date().getTime();
loadImage(document.getElementById(imgname).src, index);
}
}
async function loadImage(imageUrl, asindex) {
arrayimgLoad[asindex] = 0;
let img;
const imageLoadPromise = new Promise(resolve => {
img = new Image();
img.onload = resolve;
img.src = imageUrl;
});
await imageLoadPromise;
arrayimgLoad[asindex] = 1;
console.log("Image " + asindex + " Loaded");
return img;
}
<img src="" id='img0' width="30%" height="30%" />
<img src="" id='img1' width="30%" height="30%" />
<img src="" id='img2' width="30%" height="30%" />