<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.