<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>画像データを表示する</title>
<link rel="stylesheet" href="main.css" type="text/css">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
function loadImageFile()
{
$("imageArea").innerHTML = "";
count = 1;
maxCount = 9;
checkImage(count);
}
function checkImage(num)
{
var filename = "images/"+num+".jpg?cache="+(new Date()).getTime();
new Ajax.Request(filename, { method: "get",
onSuccess: function()
{
$("imageArea").innerHTML += "<img src='images/"+count+".jpg'>";
count++;
if (count <= maxCount) checkImage(count);
}
});
}
// --></script>
</head>
<body>
<h1>画像データを表示する</h1>
<form>
<input type="button" value="画像ファイルを読み込み" onClick="loadImageFile()">
</form>
<div id="imageArea"></div>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>画像データを全て表示する</title>
<link rel="stylesheet" href="main.css" type="text/css">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
function loadImageFile()
{
count = 1;
checkImage();
}
function checkImage()
{
var filename = "images/"+count+".jpg?cache="+(new Date()).getTime();
new Ajax.Request(filename, { method: "get",
onSuccess: function()
{
checkImage(count++);
$("imageArea").innerHTML = "Loading No = "+count;
},
onFailure:function()
{
$("imageArea").innerHTML = "";
for (var i=1; i<count; i++)
{
$("imageArea").innerHTML += "<img src='images/"+i+".jpg'>";
}
}
});
}
// --></script>
</head>
<body>
<h1>画像データを全て表示する</h1>
<form>
<input type="button" value="画像ファイルを読み込み" onClick="loadImageFile()">
</form>
<div id="imageArea"></div>
</body>
</html>
説明などは本書を参考にしてください。