Preloading images in Nuxt 3 -

Eliminate glitches by preloading images. Make sure to not over do it though.

[@jaker9007]

I can also suggest replacing v-if with v-show. That way, images will be loaded on background, since, with v-show the DOM is actually rendered, just not shown.

[@nclsDesign]

Skeleton loader is the magic balance between no glitching and no unnecessary network traffic.

[@bringbackwindowsphone]

Always specify height/width on images too where possible so browsers can prevent CLS

[@djenntt]

You can also keep things performant and load the image when the user hovers, and if the image is a smaller size, it will definitely load before the user decides to click. If you are worried about it still glitching, you can preset the determined ratio based on the image in the modal. So if it does not show immediately, the modal won't resize on the user.

[@yongdev]

how about dynamic images

[@HAYDERNAJJAR]

i face an issue that after create new product and i wanna to edit after click save all old images gone

[@vodacbao]

❤

[@piotrjasiulewicz408]

good video, keep it up

[@chaderenyore1748]

It doesn't work when deployed to netlify

[@nguyentrunghau8441]

With Data from API. You can't using with this ??. It only work with image Static image

[@ohiduzzaman_siam]

which theme are you using in Webstorm?

[@nested9301]

is this will effect initial load performance ?

[@cdruc]

yes, there's an initial load cost - otherwise we'd preload everything 😅

[@Rimtay]

Can’t it be lazy preload? With this method in case they do not click the links as soon as the page loads no glitch will appear and initial page load won’t get affected

[@TalhaBalaj]

What font

[@jegedeayodeji3306]

Can this be replicated with just vue 3 ?

[@cdruc]

Hey, yes! you can with: unhead.unjs.io/setup/vue/installation Btw, this is the exact same package Nuxt 3 uses under the hood 😃

[@jegedeayodeji3306]

@@cdruc oh brilliant! Thank you 🙏🏽

[@j0of]

what ide?

[@cdruc]

webstorm