I have a page with a lot of <img> tags (I am assembling this page programmatically). Inevitably some of the requests for image encounter http 429. Thankfully, the remote server sends a bunch of helpful response headers as follows
HTTP/1.1 429 TOO MANY REQUESTS
X-RateLimit-Limit: 20
X-RateLimit-Remaining: 20
X-RateLimit-Reset: 1646307858.32
Retry-After: 1
I am wondering if I could somehow wrap my <img> tags in code that catches the http response.status and then uses the above headers (for example, the Retry-After header) to ask for the failed image again after a set delay.
Logically, it seems to me the above would work, but I can't figure out how to code this. Fwiw, this is a completely client-side web page.
Thanks in advance for any guidance.
try something like this
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" />