JPEG Img Tag

Working on Chrome, OSX, and Firefox.

by dustinkerstein

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<img id="image">

CSS

#image {
  width: 100vw;
}

JavaScript

var index = 0;
var numFrames = 243;
var blobs = [];
var image = document.getElementById('image');

loadTextures();
window.requestAnimationFrame(animate);

async function loadTextures() {
  for (var i = 0; i < numFrames; i++) {
  	var url = "https://files.panomoments.com/jpeg/" + pad(i+1, 3) + ".jpg";
    const response = await fetch(url, {
      method: 'GET'
    });
    const arrayBuffer = await response.arrayBuffer();
    blobs[i] = window.URL.createObjectURL(new Blob([arrayBuffer], {type: "image/jpeg"}));                    
  }
}

function animate() {
  if (blobs[index]) {
  	image.src = blobs[index];
    index = (index + 1) % numFrames;
  }
  window.requestAnimationFrame(animate);
}

function pad(n, width, z) {
  z = z || '0';
  n = n + '';
  return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}