使用 JavaScript 自动刷新 HTML 中的图像

autorefreshing an image in HTML with javascript

本文关键字：图像 HTML 刷新 JavaScript 使用      更新时间：2023-09-26

我正在编写一个网页，并希望每秒自动刷新目录中的图像。我已经编写了代码，但我不确定为什么它不起作用。

<html>
<SCRIPT language="JavaScript" type="text/javascript"> 
var t = 1 // Interval in Seconds
images = new Array('foo.png'); //URLs of the Images 
function Start() { 
tmp = new Date(); 
tmp = "?"+tmp.getTime();
for (i=1;i<image.length;i++){
document.getElementById("img"+i).src = images[i]+tmp; 
}
setTimeout("Start()", t*1000) 
} 
Start(); 
</SCRIPT>
<body>
 <IMG src="foo.png" border="1" name="refresh" id="img1"> 
</body>
</html>

问题是，数组索引从 0 开始而不是从 1 开始，你的循环变量从 1 开始，但数组在索引 0 处只有 1 个项目，所以images[1]将返回未定义。

var t = 1 // Interval in Seconds
images = new Array('foo.png'); //URLs of the Images 
function Start() {
  var tmp = "?" + new Date().getTime();
  for (var i = 0; i < image.length; i++) {
    document.getElementById("img" + (i + 1)).src = images[i] + tmp;
  }
  setTimeout("Start()", t * 1000)
}
Start();

正如@Arun P Johny所提到的，数组索引从零开始。

你在for循环中使用了i<image.length，但你的var名是images，注意额外的s。

由于 i 的值从 0 开始，因此将<img>的id设置为 img0 

<html>
<SCRIPT language="JavaScript" type="text/javascript"> 
var t = 1 // Interval in Seconds
images = new Array('foo.png'); //URLs of the Images 
function Start() {
tmp = new Date(); 
tmp = "?"+tmp.getTime();
for (i=0;i<images.length;i++){
document.getElementById("img"+i).src = images[i]+tmp; 
}
setTimeout(Start, t*1000) 
} 
Start();
</SCRIPT>
<body>
 <IMG src="foo.png" border="1" name="refresh" id="img0"> 
</body>
</html>
这将在

进行图像更改时实时刷新任何图像。

<script>
setInterval(function(){
    $("#logo").each(function(){
       var timeStamp = (new Date()).getTime();
       $(this).attr("src", $(this).attr("src") + timeStamp );
    });
}, 1000);
</script>

这将刷新div 以防止 ?_=' +Math.random()+' 生成长 URL。

 <script> 
    $(document).ready(function(){
    setInterval(function(){
          $("#myDIV").load(window.location.href + " #myDIV" );
    }, 80000);
    });
    </script>

图像。

<div id="myDIV">
    <img id="logo" src="logo.png?_=' +Math.random()+'"  width="100%" height="auto" alt="onerror="this.onerror=null;this.src="error.png";"/> 
</div>
相关文章：