data-srcの値をsrcにセットした場合decoding="async"は効く?

Question

前提

画像の遅延読み込みにJavaScriptのIntersectionObserverを使い、要素が交差したときにdata-srcの値をsrcにセットするようにしています

今回HTMLにdecoding="async"を追加で設定しようと思っています

質問したいこと

下のようにsrcにプレースホルダーがセットされている場合

 <img src="/placeholder.png"
    data-src="/image.jpg"
    decoding="async"/>

この場合どちらのように動作するのでしょうか

1. プレースホルダーにdecoding="async"が適用され、JavaScriptでセットしたsrcには適用されない
2. JavaScriptでセットしたsrcにもdecoding="async"が適用される

（プレースホルダーは1×1pxの画像です）

試したこと

いろいろ検索してみましたが言及したドキュメントは見つけられませんでした

Chromeのデベロッパーツールもいろいろいじりましたが判断する材料が見つかりませんでした

Answer 1

Chromium のソースコードを見る限り、decoding=async は後からセットした src にも有効です。

IntersectionObserverを使い、要素が交差したときにdata-srcの値をsrcにセットする

<img loading=lazy> を使うと簡単です。

Comments

[agneau]

ご回答ありがとうございます、大変助かりました。
Chromiumのソースコードまでお調べいただきありがとうございます。

たしかにIntersectionObserverよりもloading=lazyのほうが簡単ですね