diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue index a0e7ee30bc..e511212189 100644 --- a/packages/frontend/src/components/MkImgWithBlurhash.vue +++ b/packages/frontend/src/components/MkImgWithBlurhash.vue @@ -114,20 +114,6 @@ watch([() => props.width, () => props.height, root], () => { immediate: true, }); -workerPromise.then(worker => { - if (!worker) return; - - worker.postMessage({ - id: viewId, - hash: props.hash, - }); - - worker.addEventListener('message', event => { - if (event.data.id !== viewId) return; - drawImage(event.data.bitmap as ImageBitmap); - }); -}); - function drawImage(bitmap: CanvasImageSource) { // canvasがない(mountedされていない)場合はTmpに保存しておく if (!canvas.value) { @@ -165,6 +151,19 @@ async function draw() { } } +function workerOnMessage(event: MessageEvent) { + if (event.data.id !== viewId) return; + drawImage(event.data.bitmap as ImageBitmap); +} + +workerPromise.then(worker => { + if (worker) { + worker.addEventListener('message', workerOnMessage); + } + + draw(); +}); + watch(() => props.src, () => { waitForDecode(); }); @@ -181,7 +180,11 @@ onMounted(() => { }); onUnmounted(() => { - workerPromise.then(worker => worker?.postMessage!({ id: viewId, delete: true })); + workerPromise.then(worker => { + if (worker) { + worker.removeEventListener('message', workerOnMessage); + } + }); });