一定時間で画像を変更するスクリプトの関数(IE)
javascript初心者です。
数日前にこちらで教えていただきまして、
画像をプリロードをして、画像がsetTimeoutで切り替わる動きをするスクリプト(任意の引数を与えた場所を処理する関数)ができたのですが、
IEで見たときにsetTimeoutのタイミングで毎回、画像読み込みがされているようなのですが(ブラウザの左下に文字が出てきます)
これを解消するにはどうすればいいでしょうか?
二箇所を同じ関数を使ってそれぞれ違う引数の付与でsetTimeoutのタイミングや読み込む画像や場所を変えています。
サンプル↓こちらに上げてあります。
http://foofoo77.web.fc2.com/imagechange/index6g.html
ソースは下記になります(上記と同一のものです)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一定時間で変わる画像</title>
<script type="text/javascript">
var animeImg = {};
//画像プリロード
function preLoad(ch) {
var img;
for (var i = 0; i < 4; i++) {
img = new Image();
img.src = "images/" + ch + i + ".gif"; // 0 ~ 3.gif
}
// 与えられた引数を使いカウンタ用プロパティを設定
animeImg[ch] = { j: 0, fnum: 0 };
}
//時間制御
var wait = new Array( 3000, 500, 3000, 3000);
var wait2 = new Array( 500, 500, 500, 500);
//表示画像制御
function change(ch, time, number) {
var obj = document.getElementById(ch);
var data = animeImg[ch];
obj.src = "images/" + ch + data.j + ".gif";
data.j++;
var Num = number;
if (data.j > Num) {
data.j = 0;
}
if (data.fnum < Num) {
data.fnum++;
} else {
data.fnum = 0;
}
var wtime = time[data.fnum];
setTimeout(function() { change(ch, time, Num); }, wtime);
}
</script>
</head>
<body>
<img src="images/image0.gif" id="image">
<script type="text/javascript">
preLoad('image');
change('image',wait,3);
</script>
<img src="images/imageb0.gif" id="imageb">
<script type="text/javascript">
preLoad('imageb');
change('imageb',wait2,2);
</script>
</body>
</html>