0

私が間違っていることを誰かが知っていますか？

基本的に、コンテンツ (画像) を div タグにロードし、x 秒ごとに更新しています。これが私が思いついたものであり、ファイルをフェードインして手動で更新するまではうまく機能します。

現在のプロセスは次のようになります。

Load ... フェードアウト、フェードインしてから消え、数秒後に再び表示されます。

何が起こっているべきかは次のとおりです。

Load ... フェードアウト、フェードイン ... フェードアウト、フェードイン ... (お分かりのとおり、ループします)

コード：

$(document).ready(function () {
     $("#webcam").load("image.html").fadeIn("slow");
   var refreshId = setInterval(function() {
      $("#webcam_img").fadeOut("slow");
      $("#webcam").load('image.html');
      $("#webcam_img").fadeIn("slow");
   }, 5000);
});

オンライン ファイルは次の場所にあります: http://colourednoise.co.uk/scripts/webcam.htm

ありがとうございました

4

3 に答える 3

3

load非同期です。要素を呼び出しfadeInていますが、その要素は。に置き換えられloadます。要素が存在することを確認するにはfadeIn、のコールバック内で行う必要があります。load

$("#webcam").load('image.html', function(){
    $("#webcam_img").fadeIn("slow");
});
于 2012-12-13T20:54:44.307 に答える
3

フェードアウトが最初に完了するまで待機するように、フェードアウトのコールバック関数内でフェードインを移動してみてください

   $("#webcam_img").fadeOut("slow",function(){
      $("#webcam").load('image.html');
      $("#webcam_img").fadeIn("slow");   
   });

これが完全な例です

$(document).ready(function () {
   $("#webcam").load("image.html").fadeIn("slow");
   var refreshId = setInterval(function() {
      $("#webcam_img").fadeOut("slow",function(){ // <-- added callback function
         $("#webcam").load('image.html'); // now this
         $("#webcam_img").fadeIn("slow"); // and this waits for fadeOut to complete first  
      });
   }, 5000);
});
于 2012-12-13T20:40:05.657 に答える
1

次の更新がキューに入れられる前に、各イメージが完全に読み込まれるように、少し異なる方法を次に示します。

$(document).ready(function () {
    $("#webcam").load("image.html").fadeIn("slow", function () { setTimeout(refreshImage, 5000) });

    function refreshImage() {
        $("#webcam_img").fadeOut("slow",function(){
            $("#webcam").load('image.html');
            $("#webcam_img").fadeIn("slow", function() { setTimeout(appendDateToBody, 5000) });
        });
    }
});
于 2012-12-13T22:10:41.123 に答える