Load images in the background and measure load times.

by Hugo Vale Pereira

HTML

<p id="status">preloading...</p>
<button id="btn" onclick="run()" disabled>Run test</button>

<p>Direct: <span id="t1">-</span></p>
<p>Preloaded: <span id="t2">-</span></p>

<img id="img1">
<img id="img2">

<script>
  let blobUrl = null
  let originalUrl = null

  async function preloadNext() {
    document.getElementById('status').textContent = 'preloading...'
    document.getElementById('btn').disabled = true

    originalUrl = `https://picsum.photos/id/${Math.floor(Math.random() * 1000)}/800/600`
    
    const response = await fetch(originalUrl)
    const blob = await response.blob()
    blobUrl = URL.createObjectURL(blob)  // local memory reference, guaranteed instant

    document.getElementById('status').textContent = 'ready!'
    document.getElementById('btn').disabled = false
  }

  preloadNext()

  function run() {
    document.getElementById('img1').src = ''
    document.getElementById('img2').src = ''
    document.getElementById('t1').textContent = '-'
    document.getElementById('t2').textContent = '-'

    // direct — downloads from network
    const start1 = performance.now()
    const img1 = document.getElementById('img1')
    img1.onload = () => {
      document.getElementById('t1').textContent = (performance.now() - start1).toFixed(0) + 'ms'
    }
    img1.src = originalUrl

    // blob — already in memory, truly instant
    const start2 = performance.now()
    document.getElementById('img2').src = blobUrl
    document.getElementById('t2').textContent = (performance.now() - start2).toFixed(0) + 'ms'

    preloadNext()
  }
</script>

CSS

* {
  max-width:100vw;
}