<script id="worker" type="text/javascript-worker">
  self.addEventListener('message', async event => {
    const imageURL = event.data

    const response = await fetch(imageURL)
    const blob = await response.blob()

    // Send the image data to the UI thread!
    self.postMessage({
      imageURL: imageURL,
      blob: blob,
    })
  })
</script>

<body>
  <img data-src="https://source.unsplash.com/random?index=1">
  <img data-src="https://source.unsplash.com/random?index=2">
  <img data-src="https://source.unsplash.com/random?index=3">
  <img data-src="https://source.unsplash.com/random?index=4">
  <img data-src="https://source.unsplash.com/random?index=5">
  <img data-src="https://source.unsplash.com/random?index=6">
</body>
body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-height: 100vh;
  max-width: 100vw;
}

img {
  max-width: 100%;
}
View Compiled
/*
 * main.js
 */

// This is a workaround because Codepen was having some issues loading the
// JavaScript file from a separate pen. 🤷
const workerAsText = document.querySelector('#worker').textContent
const workerAsBlob = new Blob([workerAsText], { type: 'text/javascript' })
const ImageLoaderWorker = new Worker(URL.createObjectURL(workerAsBlob))

// This is how we would *normally* load the web worker
// const ImageLoaderWorker = new Worker('https://s.codepen.io/trezy/pen/dEBYXV.js')

const imgElements = document.querySelectorAll('img[data-src]')

ImageLoaderWorker.addEventListener('message', event => {
  // Grab the message data from the event
  const imageData = event.data

  console.log('We got a message back!', imageData)

  const imageElement = document.querySelector(`img[data-src='${imageData.imageURL}']`)

  const objectURL = URL.createObjectURL(imageData.blob)
  
  imageElement.setAttribute('src', objectURL)
  imageElement.removeAttribute('data-src')
})

imgElements.forEach(imageElement => {
  const imageURL = imageElement.getAttribute('data-src')
  ImageLoaderWorker.postMessage(imageURL)
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.