From d9ee9d99cb52a1b8e6519ead92f17e3bc44344ee Mon Sep 17 00:00:00 2001 From: Steven Date: Thu, 10 Jun 2021 15:31:25 -0400 Subject: [PATCH 1/4] Fix blur image delay --- packages/next/client/image.tsx | 29 ++++++++++++----------------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx index b0f30251ac669..8602e59c77631 100644 --- a/packages/next/client/image.tsx +++ b/packages/next/client/image.tsx @@ -261,32 +261,27 @@ function defaultImageLoader(loaderProps: ImageLoaderProps) { // See https://stackoverflow.com/q/39777833/266535 for why we use this ref // handler instead of the img's onLoad attribute. -// 1500ms delay in removing placeholder is to prevent flash of white between -// image load and image render. function removePlaceholder( element: HTMLImageElement | null, placeholder: PlaceholderValue ) { if (placeholder === 'blur' && element) { - if (element.complete && !element.src.startsWith('data:')) { + const handleLoad = () => { + if (!element.src.startsWith('data:')) { + ;(element.decode() || Promise.resolve()).then(() => { + element.style.filter = 'none' + element.style.backgroundSize = 'none' + element.style.backgroundImage = 'none' + }) + } + } + if (element.complete) { // If the real image fails to load, this will still remove the placeholder. // This is the desired behavior for now, and will be revisited when error // handling is worked on for the image component itself. - setTimeout(() => { - element.style.filter = 'none' - element.style.backgroundSize = 'none' - element.style.backgroundImage = 'none' - }, 1500) + handleLoad() } else { - element.onload = () => { - if (!element.src.startsWith('data:')) { - setTimeout(() => { - element.style.filter = 'none' - element.style.backgroundSize = 'none' - element.style.backgroundImage = 'none' - }, 1500) - } - } + element.onload = handleLoad } } } From 201dd30fbeb3fe33a32338eeabe05c9600b6953f Mon Sep 17 00:00:00 2001 From: Steven Date: Thu, 10 Jun 2021 15:45:33 -0400 Subject: [PATCH 2/4] Apply suggestion from kripod for old browsers MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Kristóf Poduszló --- packages/next/client/image.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx index 8602e59c77631..cc98e1d176e97 100644 --- a/packages/next/client/image.tsx +++ b/packages/next/client/image.tsx @@ -268,7 +268,7 @@ function removePlaceholder( if (placeholder === 'blur' && element) { const handleLoad = () => { if (!element.src.startsWith('data:')) { - ;(element.decode() || Promise.resolve()).then(() => { + (element.decode || Promise.resolve)().then(() => { element.style.filter = 'none' element.style.backgroundSize = 'none' element.style.backgroundImage = 'none' From f23303af4bdc925fb4c0901a0f9ce31b830c22a7 Mon Sep 17 00:00:00 2001 From: Steven Date: Thu, 10 Jun 2021 15:53:30 -0400 Subject: [PATCH 3/4] Fix lint --- packages/next/client/image.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx index cc98e1d176e97..e1dfae03cfb32 100644 --- a/packages/next/client/image.tsx +++ b/packages/next/client/image.tsx @@ -268,7 +268,7 @@ function removePlaceholder( if (placeholder === 'blur' && element) { const handleLoad = () => { if (!element.src.startsWith('data:')) { - (element.decode || Promise.resolve)().then(() => { + ;(element.decode || Promise.resolve)().then(() => { element.style.filter = 'none' element.style.backgroundSize = 'none' element.style.backgroundImage = 'none' From 38c65a884396ff68ec95bd4251bca30b15712e3d Mon Sep 17 00:00:00 2001 From: Steven Date: Thu, 10 Jun 2021 16:35:40 -0400 Subject: [PATCH 4/4] Fix decode for old browsers --- packages/next/client/image.tsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx index e1dfae03cfb32..1180493a86275 100644 --- a/packages/next/client/image.tsx +++ b/packages/next/client/image.tsx @@ -262,26 +262,27 @@ function defaultImageLoader(loaderProps: ImageLoaderProps) { // See https://stackoverflow.com/q/39777833/266535 for why we use this ref // handler instead of the img's onLoad attribute. function removePlaceholder( - element: HTMLImageElement | null, + img: HTMLImageElement | null, placeholder: PlaceholderValue ) { - if (placeholder === 'blur' && element) { + if (placeholder === 'blur' && img) { const handleLoad = () => { - if (!element.src.startsWith('data:')) { - ;(element.decode || Promise.resolve)().then(() => { - element.style.filter = 'none' - element.style.backgroundSize = 'none' - element.style.backgroundImage = 'none' + if (!img.src.startsWith('data:')) { + const p = 'decode' in img ? img.decode() : Promise.resolve() + p.then(() => { + img.style.filter = 'none' + img.style.backgroundSize = 'none' + img.style.backgroundImage = 'none' }) } } - if (element.complete) { + if (img.complete) { // If the real image fails to load, this will still remove the placeholder. // This is the desired behavior for now, and will be revisited when error // handling is worked on for the image component itself. handleLoad() } else { - element.onload = handleLoad + img.onload = handleLoad } } }