如何在每个特定时间刷新图像？ JavaScript [重复]

Posted 2023-02-22

【中文标题】如何在每个特定时间刷新图像？ JavaScript [重复]

【英文标题】：How to refresh images each specific time ? JavaScript [duplicate]

【发布时间】：2018-01-08 12:08:54

【问题描述】：

我有一个带有

的简单 html 页面

<img src="http://www.hamqsl.com/solar101pic.php">

而且这张图片每天都会更新

如何让我的页面每天或每 12 小时更新一次此图像

我希望 javascript 更新它的原因 因为我在 HTML 小部件中使用它 哪个不会自行更新

【问题讨论】：

页面刷新也不会更新图片吗？

@Max08 如果我在浏览器中刷新页面，图像会更新

@Max08 但作为一个小部件我没有点击刷新的选项

你的服务器应该设置正确的缓存头

【参考方案1】：

如this page 中所述，只需使用缓存断路器重新加载您的图像：

const img = document.getElementById("myImage")

setInterval( () => 
   img.src = "http://www.hamqsl.com/solar101pic.php?" + new Date().getTime();
, 1000*3600*12) // 12 hours in ms

<img id="myImage" src="http://www.hamqsl.com/solar101pic.php" />

通过在 URL 后添加 ?randomstuff，您可以强制浏览器获取文件的新副本，因为它没有被识别为在缓存中。

【参考方案2】：

您要手动更新图片的链接吗？还是网址中的“101”会增加？

如果链接是静态的，除了某种数字整数，那么我会使用 JavaScript 将 HTML 注入您的网页。检查：

var imgHtml = '<img src="http://www.hamqsl.com/solar101pic.php">';
document.getElementById('tag-id').innerHTML = imgHtml

您可以使用 Date.now() 函数获取纪元时间，然后使用 MOD(%) 设置适当的间隔。这就是你得到 12 小时的方式。我会留给你找出来。

【讨论】：

图片由网站服务器更新

【参考方案3】：

setInterval(function() location.reload(); , 5000);

更新

我认为您的逻辑无法解决问题，因为浏览器会在您打开它时开始计数，因此图像将在打开 12 小时后更改，而不是在特定时间，因此您必须选择

在服务器端设置图片网址 为时钟上的每个小时分配一个图像

【讨论】：

是的，我现在正在改变它

OP 想要刷新图像，这里给出的 4 个解决方案中有 3 个建议重新加载整个页面。投反对票。

【参考方案4】：

window.location.reload(true) 强制页面重新加载而不使用缓存版本。 (MDN)

您可以通过这种方式实现计时器：

setTimeout(function()  
  window.location.reload(true);
,4.32e+7); // 12 hours refresh rate. This is the time, in milliseconds.

关于setTimeout (MDN)的更多信息。

【讨论】：

OP 想要刷新图像，这里给出的 4 个解决方案中有 3 个建议重新加载整个页面。投反对票。

【参考方案5】：

您可以使用 Javascript 的 setTimeout 函数，该函数会在事件达到指定的计时器（以毫秒为单位）时触发：

setTimeout(function()
    window.location.reload(1);
, 3600);

或者您可以使用以下元标记（以秒为单位）：

<meta http-equiv="refresh" content="3600" />

编辑：只是想到了一个更好的方法。使用 jQuery 删除元素然后重新绘制元素怎么样？

【讨论】：

强制用户刷新页面的用户体验相当差。我不会推荐这两种解决方案中的任何一种。

@Richie 我们正在回答 OP 的要求。他不是要求提供 UX 优雅的解决方案，而是要求我们刷新他的页面。

@JeffNoel 他不是在问如何刷新他的页面，而是在问如何更新图像。有一些不那么突兀的方法。

OP 想要刷新图像，这里给出的 4 个解决方案中有 3 个建议重新加载整个页面。投反对票。