2

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 コンテナーに正しく配置するために何をすべきか知っている人はいますか?

4

2 に答える 2

1

前のコンテンツを削除せず.append()に画像をにします。div#ipcamこれを試して

$('#ipcam').removeClass('loading').html("").append(this);
于 2012-01-13T12:14:53.700 に答える
0

setInterval() の代わりに setTimeout() を使用する必要があります。

setTimeout は、新しいリクエストが行われる前に画像が更新されることを保証します。

setInterval は、古いリクエストがまだ完了していなくても、新しいリクエストを作成します。これにより、リクエストが間違った順序で返された場合に表示の問題が発生する可能性があります。また、表示されない可能性のあるリクエストでビューアーの帯域幅を浪費するため、あまり効率的ではありません。

于 2012-02-02T21:01:04.683 に答える