簡単な答え
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.. - 人力検索はてな