g-image loads twice

Description

All g-image load twice, max size and correct viewport size

Steps to reproduce

Thoroughly tested, should be easy to reproduce, or some platform/node version issue

gridsome create gridsome-test
Index.vue <g-image alt="Example image" src="~/assets/pexels-photo-289586.jpeg" width="1920"/>
img {max-width: 100%;}

develop and build versions same result

Expected result

Only load correct size

Actual result

Loads twice

Environment

Libs:
- gridsome version: 0.5.0, 0.6.0, 0.6.1
- @gridsome/cli version: 0.1.0

Browser:
- [ x ] Chrome (desktop) version 74
- [ x ] Firefox version 68
 
For Tooling issues:
- Node version: 11.8
- Platform:  Windows

Others:
Windows 8.1, npm

[dominiquedutra]

@robaxelsen Done.

[dcastil]

I had a similar issue with an own implementation of lazy-loaded responsive images about half a year ago. But in my case the image was loaded twice only in Safari for some reason. I still hope that the description of my problem and solution can help here.

In my case I left the src and srcset attributes empty at first. When intersecting the image, the state in my Vue image component changed so that both src and srcset were filled with the correct strings. The browser then started downloading the image specified in the src attribute, closely followed by downloading the correct image from the srcset attribute.

I found out that changing the order of the src and srcset attributes in my Vue single file component solved the problem:

<!-- Broken! -->
<img :src="src" :srcset="srcset">

<!-- Working! -->
<img :srcset="srcset" :src="src">

The problem was caused by the browser immediately (literally immediately) firing a request if an <img> source changes while Vue is setting and updating the attributes imperatively under the hood (it can’t set both attributes at once, it has to do it in sequence).

The src attribute was set first, so the browser fired a request to the path specified in there. Afterwards the srcset attribute was set and because the srcset attribute has precedence over src, the image source changed again and the browser fired another request.

So my proposal to the Gridsome team is: Try to make sure that srcset is always set and updated before src in <g-image>. Hopefully that should resolve the issue.