Tengo una página con muchas etiquetas <img> (estoy ensamblando esta página mediante programación). Inevitablemente, algunas de las solicitudes de imágenes encuentran http 429. Afortunadamente, el servidor remoto envía un montón de encabezados de respuesta útiles de la siguiente manera
HTTP/1.1 429 TOO MANY REQUESTS X-RateLimit-Limit: 20 X-RateLimit-Remaining: 20 X-RateLimit-Reset: 1646307858.32 Retry-After: 1 Me pregunto si de alguna manera podría envolver mis etiquetas <img> en un código que capte la response.status http.status y luego use los encabezados anteriores (por ejemplo, el encabezado Retry-After ) para solicitar la imagen fallida nuevamente después de un retraso establecido.
Lógicamente, me parece que lo anterior funcionaría, pero no puedo entender cómo codificar esto. Fwiw, esta es una página web completamente del lado del cliente.
Gracias de antemano por cualquier orientación.
prueba algo como esto
window.addEventListener("DOMContentLoaded", function() { const images = document.querySelectorAll("img[data-src]"); let cnt = 0; const loadImage = src => { let img = new Image(); let tgtImage = images[cnt]; img.addEventListener("load", function() { tgtImage.src = this.src }) img.addEventListener("error", function() { setTimeout(function() { loadImage(`${src}`) }, 1000) }) img.src = src; cnt++ if (cnt >= images.length) return; loadImage(images[cnt].dataset.src) } loadImage(images[cnt].dataset.src) }) <img src="https://dummyimage.com/200x300&text=placeholder" data-src="https://dummyimage.com/200x300&text=image1" /> <img src="https://dummyimage.com/200x300&text=placeholder" data-src="https://dummyimage.com/200x300&text=image2" /> <img src="https://dummyimage.com/200x300&text=placeholder" data-src="https://ERROR.com/200x300&text=image3" /> <img src="https://dummyimage.com/200x300&text=placeholder" data-src="https://dummyimage.com/200x300&text=image4" />