jQuery の初心者として、jQuery For Designers (J4D) のチュートリアルに従いました。これは、Rzetterberg がこの投稿でWebcam image refresh with ajaxで確認するように指示したためです。
ローカルの IPCamera から取得している画像は正しく表示されますが、関数がリロードされるたびに、新しく取得した画像が以前に取得した画像の下に配置されます。この結果、取得した各画像が互いに下に配置されたページが表示されます。
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
var refreshId = setInterval(function() {
url = 'http://xxx.xxx.xxx.xxx?randval=';
var randval = Math.random();
var img = new Image();
$(img).load(function () {
$(this).hide();
$('#ipcam').removeClass('loading').append(this);
$(this).show();
}).error(function () {
// notify the user that the image could not be loaded
}).attr('src', url + randval);
}, 1000);
$.ajaxSetup({ cache: false });
});
</script>
</head>
<body id="page">
<div id="ipcam" class="loading">
</div>
</body>
</html>
取得した新しい画像を「ipcam」と呼ばれる div コンテナーに正しく配置するために何をすべきか知っている人はいますか?