Image Flickering because of RouterView :key="$route.fullPath"

[wysisoft]

This is a gif of me doing the <RouterView :key="$route.fullPath"/> trick and navigating between two views that just shows a picture of an elephant. I like the :key trick because my views sometimes have animations and custom js that is hard to reset, at times I just want to throw away the html and reset the view. But for images, there is a flicker as the view changes, even though the browser should have the image totally cached, and I assume the views should switch in a single "tick"?. The only way I know to hide the flicker is with a manual transition that does some pausing. Ideas?

[xhc-code]

第一种方法就是使用 Image API手动加载下图片连接，浏览器缓存后，再更换图片URL。（需要配置了图片缓存策略）。可以理解为图片离屏缓存。
第二种就是切换图片时，同时显示个加载动画，待图片加载完成后（可以捕获事件来判断），加载动画去掉。

目前我只知道这2种。

[wysisoft]

I do not have a great answer after trying a many different ideas. I assume the image is cached in the browser as I click around, I don't think the flickering is the browser getting the image from the server. My solution is to wait for this function to return false during a transition, where the new component is rendered but not yet shown function areImagesLoading(parentElement) { // Get all <img> elements inside the parent element const images = parentElement.getElementsByTagName('img'); // Loop through each image to check its loading status for (let img of images) { // If any image is not fully loaded, return true if (!img.complete || img.naturalHeight === 0) { return true; } } // If no images are loading, return false return false; }

…

On Wed, Oct 29, 2025 at 4:26 AM 星小梦 ***@***.***> wrote: 第一种方法就是使用 Image API手动加载下图片连接，浏览器缓存后，再更换图片URL。（需要配置了图片缓存策略）。可以理解为图片离屏缓存。 第二种就是切换图片时，同时显示个加载动画，待图片加载完成后（可以捕获事件来判断），加载动画去掉。 目前我只知道这2种。 — Reply to this email directly, view it on GitHub <#14032 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADTZR3DQSDEPO5I4JVD7K6L32CI5FAVCNFSM6AAAAACKPXYUL6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTIOBRGQ2DGMA> . You are receiving this because you authored the thread.Message ID: ***@***.***>