Quiero actualizar las imágenes en una página y, en caso de que la imagen me dé un error al cargar, quiero volver a la imagen anterior almacenada en caché.
¿Alguien puede ayudarme?
Gracias.
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%" />