Native loading=lazy on images only works if it's stated before the src tag

[Mitcheljager]

Describe the bug

When using native loading=lazy to lazy load an image it will only work if loading=lazy is stated before you the src attribute.

REPL: https://svelte.dev/repl/6c005d5c725e49649693f579ff572d11?version=3.48.0

In this example there are two columns, the left column has images with loading=lazy stated after the src attribute. The right column has it started before the src attribute. The blue squares are images. Each image is unique to prevent caching. The squares in the top left and top right turn from red to green when the image is loaded. As you can see in this GIF the right column loads images as I scroll down, working as expected. The left column is always green, indicating that all images are loaded from the start. I've tested in both Firefox and Chrome.

Reproduction

Lazy loading does not work:

<img {src} loading="lazy" />

Lazy loading does work:

<img loading="lazy" {src} />

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i7-9700KF CPU @ 3.60GHz
    Memory: 15.98 GB / 31.92 GB
  Binaries:
    Node: 17.0.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.18 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 103.0.5060.114
    Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.44)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    rollup: ^2.3.4 => 2.75.7
    svelte: ^3.0.0 => 3.48.0

Severity

annoyance

[Conduitry]

Svelte adds the attributes to the element in the order that they are in the original source. If there are some situations (like lazy loading) where the order matters, this sounds like - at most - something to document, rather than trying to adjust the order that the attributes are added.

[baseballyama]

related issue: #7454