Image is loaded twice

[chrispreisler]

Reproduction

https://stackblitz.com/edit/nuxt-3-xqdc5j?file=app.vue

Describe the bug

Hey,

I maybe found another bug, but I am not sure why it is happening. Is hapens with src and srcset attribute. Also tested it on localhost and on a nuxt build. The image is loaded twice. Also the image is only shown, when the image is loaded the second time.

You can test this, when you go into the network panel and selected the img filter.

Thanks for your help in advance again.

Best regards
Chris

Additional context

No response

Logs

No response

[chrispreisler]

I found the part, why this is happening. When you add the load event to the imagePreLoader Object it get's loaded for the first time. The function updateImageSrc/updateImageSrcset will then load the image again by I think assigning the data-src to src.

Maybe this helps :)

[chrispreisler]

Of course this is only happening, when you disable the cache. When you load it completely fresh withouth the disable cache function activated, I think it eliminates the second load, because it is already in memory cache. So maybe this isn't a bug and has no effect on the loading time of the page/images.

[johannschopplich]

Thanks for the investigation.

Correct, this is the intended behavior. The image placeholder should be displayed as long as possible. The target image is loaded with new Image() to listen for the load event. Only then will the placeholder image be replaced with the actual image. This will be served from the browser's cache and won't result in duplicated requests (unless caching is disabled, as you have mentioned).

This prevents empty (image) areas from being displayed while an image is being loaded.