定期刷新 jQuery 中的 <img>答案

【问题标题】：Refresh <img> in jQuery periodically定期刷新 jQuery 中的 <img>
【发布时间】：2011-09-07 16:12:43
【问题描述】：

类似于How to reload/refresh an element(image) in jQuery，但不是同时。

我有一个网络摄像头，它每 2 秒保存一次图像，而不是流式传输。使用 jQuery（或直接 JS）我只想刷新图像元素。

应该很简单，但我的所有搜索都会根据请求显示刷新。

【问题讨论】：

【解决方案1】：

setInterval(function(){
    $("#myimg").attr("src", "/myimg.jpg?"+new Date().getTime());
},2000);

【讨论】：

你在哪里有“myimg.jpg” 我有一个带有路径的 JS 全局变量，我该如何整合它？我试过 $("#myimg").attr("src", imagePath+"?"+d.getTime());但图像消失了
我写了new Date().getTime()。如果你使用d.getTime()，你必须先分配它var d = new Date();

【解决方案2】：

您必须强制浏览器重新加载图像，而不是从缓存中获取图像。您可以通过更改 url 来做到这一点，添加一个每次都会更改的无用参数，例如时间戳。

$('img.webcam').each(function() {
    var jqt = $(this);
    var src = jqt.attr('src');
    src = src.substr(0,src.indexOf('?'));
    src += '?_ts=' + new Date().getTime();
    jqt.attr('src',src);
});

在计时器内或单击时执行此 sn-p，或两者兼而有之。

【讨论】：

【解决方案3】：

setInterval 是一个计时器，它将在 x 毫秒内执行一个函数

setInterval(function () {
    var d = new Date();
    $("#myimg").attr("src", "/myimg.jpg?"+d.getTime());
}, 2000);

【讨论】：

你在哪里有“myimg.jpg” 我有一个带有路径的 JS 全局变量，我该如何整合它？我试过 $("#myimg").attr("src", imagePath+"?"+d.getTime());但图像消失了

【解决方案4】：

这应该可以完成工作：

window.setInterval(function() {
    var d = new Date();
    $("#myimg").attr("src", "/myimg.jpg?"+d.getTime());
}, 2000);

【讨论】：

你在哪里有“myimg.jpg” 我有一个带有路径的 JS 全局变量，我该如何整合它？我试过 $("#myimg").attr("src", imagePath+"?"+d.getTime());但图像消失了

【解决方案5】：

为将刷新的图像源添加时间戳。

setInterval(function(){
    $("img").each(function(){
       var timeStamp = (new Date()).getTime();
       $(this).attr("src", $(this).attr("src") + timeStamp );
    });
}, 2000);

【讨论】：

与其他答案不同，这将每 2 秒增加一次 URL 的大小（因为您一直在追加，而不是替换）。用不了多久，您的 URL 就会包含数千个字符。