画像の「表示」が完了した後に処理を実行する方法

質問内容

30MB以上あるJPG形式の画像をブラウザ(Chrome)で読み込ませ、そのimgタグにonloadをつけたのですが、当たり前ですが読み込みが完了するとonloadが実行されてしまいます。
テストに使用したしたページ:

html
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title>Test</title>
6  </head>
7  <body>
8    <script>
9    function loads(){alert("load!");}
10    function errors(){alert("error!");}
11    </script>
12    <img src="file:///C:/Users/user/Pictures/bigsize.jpg" onload="loads()" onerror="errors()">
13  </body>
14</html>
15

ですが、サイズの大きい画像の場合、表示に時間がかかりイベントが呼ばれた時点で全体が表示されていない場合があります。

実現したいことは、画像の表示が完了してから処理をしたいです。

何か方法がありましたらお願いいたします。

動作確認:Windows 10;Google Chrome[Ver80.0.3987.132]

Lhankor_Mhy

2020/03/13 02:19

この「画像の表示」とは、ビューポートに入ったら、という意味ですか？

行動規範の内容に同意します

回答2件

ベストアンサー

loadではなくdecodeが終わったときに処理を実行してみてはどうでしょう。
https://teratail.com/questions/213680

投稿2020/03/13 20:57

naomi3

総合スコア1105

Res

2020/03/27 13:31

ベストアンサーの選択が遅くなってしまい申し訳ありません。 decodeの発想はなかったのでありがとうございます。とても参考になりました。

行動規範の内容に同意します

stackoverflowのこちらの回答参考になりませんでしょうか？naturalWidthとnaturalHeightに値が入るタイミングを捉えるようです。
How to detect when an image has finished rendering in the browser (i.e. painted)?

投稿2020/03/13 15:39