- The
script
tag has to be after the img
tag or this won’t work! Big thanks to Yoric and Brendan for the code!
<!doctype html>
<html>
<head>
<title>Worldwide Flickr Barcode</title>
<script>
async function loop() {
// Our `<img>`.
let img = document.getElementById("barcode");
// The url of the data that we download. Initially, we haven't downloaded any data,
// so `null`.
let objectURL = null;
while (true) {
// Wait 5 seconds.
await new Promise(resolve => setTimeout(resolve, 5000));
// Get the data.
let response = await fetch("https://rytbarcode.ngrok.io/barcode.png", { cache: 'no-cache' });
// For images, we want the response as a blob (Binary Large Object)
let blob = await response.blob();
if (objectURL) {
// If we already have data, clean up the memory.
URL.revokeObjectURL(objectURL);
}
// Convert the blob into a URL.
objectURL = URL.createObjectURL(blob);
// ...and point the `<img>` to this image.
img.setAttribute("src", objectURL);
}
}
</script>
</head>
<body>
<img id="barcode"/>
<script>loop();</script>
</body>
</html>
Previously
Leave a comment on github