https://www.loketdesign.com/worker-1024.js

1let canvas, ctx, count = 0
2const images = new Array(91)
3
4const urls = new Array(76)
5  .fill(null)
6  .map((value, i) => `/images/scroll-sequence/nez-1024/BA_02.3834.${i + 1}.png`);
7  // .map((value, i) => `https://loket.netlify.app/nez-1024/BA_02.3832.${i + 1}.png`);
8  // .map((value, i) => `https://loket-assets.netlify.app/scroll-sequence/nez-1024/BA_02.3834.${i + 1}.png`);
9
10// load images async as blob
11urls.forEach((imageURL, i) => {
12  fetch(imageURL)
13    .then(response => response.blob())
14    .then(imageBlob => createImageBitmap(imageBlob))
15    .then(imageBitmap => {
16      images[i - 1] = imageBitmap
17      count++
18      if(count == urls.length) self.postMessage('complete')
19  })
20})
21
22self.addEventListener('message', async event => {
23  if (event.data[0] == 'drawIndex') {
24    const currentIndex = event.data[1]
25    
26    ctx.clearRect(0, 0, canvas.width, canvas.height);
27    ctx.drawImage(images[currentIndex], 0, 0, canvas.width, canvas.height);
28    
29  } else {
30    canvas = event.data
31    ctx = canvas.getContext('2d')
32
33    const dpr = 4
34    const width = canvas.width
35    const height = canvas.height
36    canvas.width = width * dpr
37    canvas.height = height * dpr
38  }
39})