是否可以使用jQuery从服务器重新加载具有相同文件名的图像?

例如,我在页面上有一个图像,但是,物理图像可以根据用户操作而更改。注意,这并不意味着文件名发生了变化,而是实际的文件本身发生了变化。

ie:

用户在默认页面上查看图像 用户上传新图像 页面上的默认图像没有改变(我假设这是由于文件名相同,浏览器使用缓存版本)

不管下面的代码被调用的频率如何,同样的问题仍然存在。

$("#myimg").attr("src", "/myimg.jpg");

在jQuery文档中,如果“load”函数有一个默认方法来触发事件,而不是将回调函数绑定到成功/完成的元素加载,那么它将是完美的。

非常感谢任何帮助。


当前回答

我可能需要多次重新加载图像源。我用Lodash找到了一个很适合我的解决方案:

$("#myimg").attr('src', _.split($("#myimg").attr('src'), '?', 1)[0] + '?t=' + _.now());

现有的时间戳将被截断并替换为新的时间戳。

其他回答

听起来好像是您的浏览器缓存了图像(我现在注意到您在问题中写了这个)。你可以通过传递一个额外的变量来强制浏览器重新加载图像,如下所示:

d = new Date();
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime());

我可能需要多次重新加载图像源。我用Lodash找到了一个很适合我的解决方案:

$("#myimg").attr('src', _.split($("#myimg").attr('src'), '?', 1)[0] + '?t=' + _.now());

现有的时间戳将被截断并替换为新的时间戳。

这工作很棒!但是,如果您多次重载SRC,时间戳也会连接到url。我修改了已接受的答案来处理这个问题。

$('#image_reload_button').on('click', function () {
    var img = $('#your_image_selector');
    var src = img.attr('src');
    var i = src.indexOf('?dummy=');
    src = i != -1 ? src.substring(0, i) : src;

    var d = new Date();
    img.attr('src', src + '?dummy=' + d.getTime());
});

有时候解是这样的

$("#Image").attr("src", $('#srcVal').val()+"&"+Math.floor(Math.random()*1000));

也没有正确刷新SRC,尝试一下,它为我工作->

$("#Image").attr("src", "dummy.jpg");
$("#Image").attr("src", $('#srcVal').val()+"&"+Math.floor(Math.random()*1000));

您是否尝试重置图像容器html。当然,如果是浏览器在缓存,那么这就没有帮助了。

function imageUploadComplete () {
    $("#image_container").html("<img src='" + newImageUrl + "'>");
}