javascript - Jquery以间隔加载外部图像

Question

我想从外部网址更改图像，我这样做了：

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

方法一：

在放置新图像之前，您应该清除以前的图像。

 $(document).ready(function () {
   setInterval(load, 5000);
   var imgPaht = "http://www.radiobaiano.it/webcam.jpg";
   function load() {
    console.log("inside load");
    $('<img src="'+ imgPaht+'?'+new Date().getTime() +'">').load(function () {
       // use this only if you have the new image to be in #webcam
        $('#webcam').empty();
        $(this).width(270).height(250).appendTo('#webcam');
    });
  }
});

方法二：

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

方法三：

       $(document).ready(function () {
          setInterval(load, 5000);
          var imgPaht = "http://www.radiobaiano.it/webcam.jpg";
        function load() {

         if($('#webcam img').length == 0)
         {
            $('<img id="imageId" src="'+ imgPaht+'?'+new Date().getTime() +'">').load(function () {
           // use this only if you have the new image to be in #webcam
            $('#webcam').empty();
            $(this).width(270).height(250).appendTo('#webcam');
            });
         }
         else
         {
            $('#webcam img').attr('src',imgPaht);
         }
     });

Answer 2

尝试这个：

<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 3

您的原始代码很好。但是有几个问题：

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 4

使用setTimeout()：

var t = setTimeout(code, interval);

间隔以毫秒为单位，因此 5 秒为 5000：

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