documentのDOMContentLoadedイベントとimgタグのloadイベントの順番は保証されますか？

以下の実装のようにDOMContentLoadedイベントでdata-src属性を持つimgタグを取得してきて、loadイベントにある関数（someFunction）を設定しているのですが、この実装だと、ブラウザのリロード時にloadイベントが発火しません。

ブラウザの開発ツールを使って調べたところ、ブラウザキャッシュから画像を取ってくるスピードが速すぎて、loadイベントにイベントリスナーを設定する前にloadイベントが終わってしまっているんじゃないかと疑っています。

DOMContentLoadedイベントとimgタグのloadedイベントは状況によって順番が前後してしまうことはあるのでしょうか？
リロード時にもloadedイベントを発火させたいのですが、どのように修正すれば発火を保証することができるのでしょうか。
ご教授いただけますと幸いです。よろしくお願いいたします。

javascript
1document.addEventListener("DOMContentLoaded", function(event) {
2  let imgs = document.querySelectorAll("[data-src]");
3  for (var img of imgs) {
4    img.addEventListener("load", someFunction, false);
5  }
6});

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

回答2件

ベストアンサー

とりあえず、↓これでロード済みかをチェックし、

The read-only HTMLImageElement interface's complete attribute is a Boolean value which indicates whether or not the image has completely loaded.

HTMLImageElement.complete - Web APIs | MDN

ロード済みでないならば、イベントを設定すればいいのではいかがでしょうか。

参考：
永遠にcompleteしない画像 - Qiita
imgタグの画像読み込みを監視する - Qiita

投稿2020/04/14 07:51

Lhankor_Mhy

総合スコア36104

kazuki__

2020/04/14 08:00

回答ありがとうございます！こんなプロパティがあるとは知りませんでした。ロード済でないならイベント設定、ロード済なら直接処理実行するみたいにできそうです！助かりました！ありがとうございます！

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

imgs が {HTMLImageElement} のコレクションであるなら、for ループ内で img.src を与えるまで読み込みすら始まりません。

javascript
1document.addEventListener("DOMContentLoaded", function(event) {
2  let imgs = document.querySelectorAll("[data-src]");
3  for (var img of imgs) {
4    img.addEventListener("load", someFunction, false);
5    img.src = img.getAttribute("[data-src]"); // 古い書き方ですが（汗
6  }
7});