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

方法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');
    });
  }
});

方法2：

$(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');
     });
   }
});

方法3：

       $(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

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

您最初没有调用load()函数，因此您必须等待5秒才能显示最初的图像。
您正在使用.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()将显示初始图片。

Live test case

Answer 4

使用setTimeout()：

var t = setTimeout(code, interval);

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

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

Jquery以间隔加载外部图像

4 个答案: