Javascriptで画像の読み込みを待つ

あまり得意でないけど、Javascriptで少し調べたことがあるのでメモ。

やりたいこと

  • 画面遷移時の画像読み込みを制御したい
  • 遷移前に特定の画像を読み込む(タグ計測の為)
  • 画像が読み込めたら遷移させる
  • 画像が読み込めなくても一定時間で遷移させる

コード

<html>
<head>
<title>Image load test</title>
</head>
<body>

<a id="next" href="http://192.168.56.101/" onClick="return loadImage();">Next page</a>

<script type="text/javascript">
<!--
// 遷移実行
function redirect() {
  var element = document.getElementById("next");
  location.href = element.href;
}

// 画像読み込み
function loadImage(){
  var img = document.getElementById("tag");
  img.src = "http://192.168.56.101/img.png";
  img.onload = function() {
    redirect();
  }

  // タイムアウト時間をミリ秒で指定
  var timeout = 5000;
  setTimeout(redirect, timeout);

  // 通常の画面遷移は無効に
  return false;
}
//-->
</script>

<img id="tag">

</body>
</html>

注意点

  • IEだと画像がキャッシュされているとタイムアウトまで待ってしまう。
  • setTimeout()はブラウザにより引数が違うらしい。