(cache) 画像や外部.jsファイルの読み込み完了のタイミングを知る

2012-08-26 (Sun)

■[JavaScript]画像や外部.js ファイルの読み込み完了のタイミングを知る

簡単な答え

onload を使いましょう。

JavaScript

var img = new Image();
img.src = "hoge.png";
img.onload = function() {
  alert("読み込み完了");
}
document.body.appendChild(img);

var script = document.createElement('script');
script.src = "fuga.js";
script.onload = function() {
  alert("読み込み完了");
}
document.body.appendChild(script);

HTML

参考までにHTMLも。

<img src="hoge.png" onload="alert('読み込み完了');">
<script src="fuga.js" onload="alert('読み込み完了');"></script>

Internet Explorer *1 の場合

IE にも onload はあるのですが挙動が特殊です。読み込むファイルがすでにキャッシュされていると、onload が呼ばれないことがあります。

それだと困る場合には onreadystatechange event と readyState property を使い対処します。onreadystatechange で呼ばれたハンドラ関数で readyState を確認し、"loaded" または "complete" の時に処理をします。"loaded" または "complete" のタイミングが、本来 onload が呼ばれるべきタイミングと同じです。

コードは略。

ラップしてみる

onload をラップして、標準に従うブラウザと標準に従わないIE両方に対応してみました。

// 実装
function onload(element, handler) {
  if ("onreadystatechange" in element) {
    element.onreadystatechange = function (e) {
      if (element.readyState === "loaded" || element.readyState === "complete") {
        return handler(e);
      }
    };
  } else {
    element.onload = handler;
  }
}


// ユーザーコード
var img = new Image();
img.src = "hoge.png";
onload(img, function() {
  alert("読み込み完了");
});
document.body.appendChild(img);

var script = document.createElement('script');
script.src = "fuga.js";
onload(script, function() {
  alert("読み込み完了");
});
document.body.appendChild(script);

setInterval を使うコード

「特定のプロパティが追加されたならば .js ファイルの読み込みが完了しているはずだ」という考え *2 の元、setInterval で遅延させ、(読み込む .js によって追加されるであろう)特定のプロパティが追加されるまで遅延を繰り返すというコードが存在するようです。そんなコードは使わないようにしましょう…。

→Javascriptでの外部JSファイル読み込み完了を知る方法は？ Javas.. - 人力検索はてな