画像の読み込みが完了したかどうかをチェック場合のアイデア集

console.log( HTMLImageElement.complete );

上記がtrueの場合は読み込みが完了している。
ただし、srcやsrcsetがなかったり、404エラーなどの場合でもtrueを返す。
要はsuccessではなく、読み込みが完了したかどうかのcompleteである。

また、よくJSでimg要素を作成して、それのonloadイベントで画像読み込み完了したかどうかを判断することがあるが、srcsetがある場合は、どれを読み込んだかわからないときがある。
そのようなときは下記のAPIを使用する。

console.log( HTMLImageElement.currentSrc );

画像を読み込む場合にサイズもセットで読む必要がある場合は、以下。

console.log( HTMLImageElement.naturalWidth );

早く画像を読み込みたい場合は、プリロードを使用し、プリロードでもsrcsetが使用できるため、それを利用する。

<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">

CSSの場合はimge-setプロパティを使用する。

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);