画像が読み込まれたらフェードインさせる

動作ブラウザ
Internet Explorer Netscape Navigator
4.0x 4.5 5.0x 5.5 6.0 4.x 6.0
Windows - × ×
Macintosh × × × - - × ×
UNIX - - - - - × ×

解  説  画像が読み込まれたらフェードインさせるにはimgタグにonLoadイベントを記述し自分自身が読み込まれた場合にフェードインする画像のリストに追加していきます。タイマーを使って定期的にフェードインする画像があれば不透明度をあげていきます。
コード <html> <head> <title>画像が読み込まれたらフェードインさせる</title> <script language="JavaScript"><!-- iObj = new Array(); count = 0; function fadeImg() { if (count == 0) return; for(i=0; i<count; i++) { a = iObj[i].filters["alpha"].opacity; if (a < 100) a += 10; iObj[i].filters["alpha"].opacity = a; } } function setImg(obj) { iObj[count++] = obj; } setInterval("fadeImg()",100); // --></script> </head> <body> 画像が読み込まれたらフェードインさせます。<br><br> <img src="image0.jpg" style="filter:alpha(opacity=0)" onLoad="setImg(this)"> <img src="image1.jpg" style="filter:alpha(opacity=0)" onLoad="setImg(this)"> <img src="image2.jpg" style="filter:alpha(opacity=0)" onLoad="setImg(this)"> <img src="image3.jpg" style="filter:alpha(opacity=0)" onLoad="setImg(this)"> </body> </html>

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!