これは私のHTMLテストページです:
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<style type="text/css">
#imager img{
width: 1050px;
height:650px;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var index = 0;
var max = 1;
//! get next image
function getImage(){
if (index >= max ) index = 0;
var objTest = {
"index" : index++
};
$.ajax({
type: 'POST',
url: "prova.php",
data: objTest,
success: function(response){
max = response.max;
imageToLoad = response.imageToLoad;
//! Clean div
$("#imager").html("");
//! Display new image
$("#imager").append("<img src='"+imageToLoad+"'></img>");
},
dataType: "json"
});
}
</script>
</head>
<body>
<button onclick="getImage()">get img</button>
<div id="imager"></div>
</body>
そして、これは私のprova.phpテストページです:
$max = 0;
$imgToLoad = null;
// Open image dir
if ($handle = opendir('img')) {
while (false !== ($entry = readdir($handle))) {
if($entry == '.' || $entry == '..' ) continue;
if($_POST['index'] == $max)
// Save next image to show
$imgToLoad =$entry;
// Image counter
$max++;
}
closedir($handle);
}
$array = array(
"max" => $max,
"imageToLoad" => "http://192.168.1.96/prove/cache/img/".$imgToLoad
);
// Return next image and max number of image the we can show
echo json_encode($array);
問題は、「getImage()」を呼び出すたびにメモリ ブラウザが増加することです (IE と Firefox でテスト済み)。私の「img」フォルダーには、約 4600x3000px (400kb) の非常に巨大な画像がたくさん含まれており、しばらくするとメモリ ブラウザーは約 1 GB などになります。
手伝ってくれてありがとう