javascript - Jquery 間隔をあけて外部画像を読み込む

Question

外部 URL から画像を変更したいのですが、これを行いました。

var imgPaht = "http://www.sito.it/webcam.jpg";
$('<img src="'+ imgPaht +'">').load(function() {
    $(this).width(270).height(250).appendTo('#webcam');
});

動作しますが、5 秒間隔でこのアクションを繰り返したいと思います。間隔を設定しようとしましたが、おそらく何か間違ったことをしました。ここに私が持っているものがあります:

$(document).ready(function () {
    setInterval(load, 5000);
    var imgPaht = "http://www.miosito.it/webcam.jpg";
    function load() {
        $('<img src="'+ imgPaht +'">').load(function () {
            $(this).width(270).height(250).appendTo('#webcam');
        });
    }
});

Answer 1

これを試して：

<script type="text/javascript">
$(document).ready(function () {     

  var imgPaht = "http://www.sito.it/webcam.jpg";
  window.setInterval(function(){
    $('<img src="'+ imgPaht +'">').load(function() {
      $(this).width(270).height(250).appendTo('#webcam');
    });
  }, 5000);

});

</script>

Answer 2

元のコードは問題ありません。ただし、いくつかの問題があります。

1. 最初に関数を呼び出さないload()ため、画像が最初に表示されるまで 5 秒待つ必要があります。
2. 既存のコンテンツをクリアせずに使用して.appendToいるため、画像はプレースホルダーに何度も追加され、古いものは置き換えられません。

両方の解決策は次のとおりです。

setInterval(load, 5000);
var imgPaht = "http://www.miosito.it/webcam.jpg";
function load() {
    var placeholder = $("#webcam");
    placeholder.html("");
    $('<img src="'+ imgPaht +'">').load(function () {
        $(this).width(270).height(250).appendTo(placeholder);
    });
}
load();

は.html("")内容をクリアし、呼び出しload()は初期画像を表示します。

ライブ テスト ケース。

Answer 3

使用setTimeout():

var t = setTimeout(code, interval);

間隔はミリ秒単位なので、5 秒は 5000 になります。

var t = setTimeout($('img').attr('src', 'new-path'), 5000);