回答編集履歴
2
追記
answer
CHANGED
|
@@ -3,10 +3,12 @@
|
|
|
3
3
|
> 読み込み完了 = 表示も完了。
|
|
4
4
|
|
|
5
5
|
[load](https://developer.mozilla.org/ja/docs/Web/Events/load)はあくまで画像ファイルが読み込めた状態です。
|
|
6
|
-
この後に表示できるようにデコード処理が走ります（load=ダウンロード、decode=圧縮ファイルの展開/解凍）。
|
|
6
|
+
この後に表示できるようにデコード処理が走ります（load=ダウンロード、decode=圧縮ファイルの展開/解凍のイメージ）。
|
|
7
7
|
ファイルサイズが大きい画像はデコード処理も時間がかかります。
|
|
8
8
|
|
|
9
9
|
[IEとEdgeを捨てる](https://caniuse.com/#feat=mdn-api_htmlimageelement_decode)なら、[decode()](https://developer.mozilla.org/ja/docs/Web/API/HTMLImageElement/decode)がpromiseを返すので、デコードが終わったあとの処理が書けます。デコードが終わるまでローディングを表示させれば意図した動きになりませんか？
|
|
10
|
+
- 全ての画像を一気に制御したいなら[Promise.all()
|
|
11
|
+
](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)で待てばOKだと思います。
|
|
10
12
|
- Edgeも近々Chromeとほぼ同じになるのでIEを捨てるのは有りだと思います。
|
|
11
13
|
|
|
12
14
|
|
1
追記
answer
CHANGED
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
> 読み込み完了 = 表示も完了。
|
|
4
4
|
|
|
5
5
|
[load](https://developer.mozilla.org/ja/docs/Web/Events/load)はあくまで画像ファイルが読み込めた状態です。
|
|
6
|
-
この後に表示できるようにデコード処理が走ります（圧縮ファイルの展開/解凍
|
|
6
|
+
この後に表示できるようにデコード処理が走ります（load=ダウンロード、decode=圧縮ファイルの展開/解凍）。
|
|
7
|
-
サイズが大きい画像はデコード処理も時間がかかります。
|
|
7
|
+
ファイルサイズが大きい画像はデコード処理も時間がかかります。
|
|
8
8
|
|
|
9
9
|
[IEとEdgeを捨てる](https://caniuse.com/#feat=mdn-api_htmlimageelement_decode)なら、[decode()](https://developer.mozilla.org/ja/docs/Web/API/HTMLImageElement/decode)がpromiseを返すので、デコードが終わったあとの処理が書けます。デコードが終わるまでローディングを表示させれば意図した動きになりませんか？
|
|
10
10
|
- Edgeも近々Chromeとほぼ同じになるのでIEを捨てるのは有りだと思います。
|