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

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

ie:

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

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

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

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

非常感谢任何帮助。


当前回答

这可能是你自己提到的两个问题之一。

服务器正在缓存映像 jQuery不会触发或至少不会更新属性

说实话,我觉得是第二。如果我们能看到更多的jQuery,这将会容易得多。但是首先,请尝试先删除该属性,然后重新设置它。看看这是否有帮助:

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

即使这是有效的,张贴一些代码,因为这不是最佳的,在我看来:-)

其他回答

只需一行,无需担心将图像SRC硬编码到javascript中(感谢jeerose的想法:

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

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

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

根据@kasper Taeymans的回答。

如果你只是需要重新加载image(而不是用smth new替换它的src),尝试:

$(function() { var img = $('#img'); var refreshImg = function(img) { // the core of answer is 2 lines below var dummy = '?dummy='; img.attr('src', img.attr('src').split(dummy)[0] + dummy + (new Date()).getTime()); // remove call on production updateImgVisualizer(); }; // for display current img url in input // for sandbox only! var updateImgVisualizer = function() { $('#img-url').val(img.attr('src')); }; // bind img reload on btn click $('.img-reloader').click(function() { refreshImg(img); }); // remove call on production updateImgVisualizer(); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <img id="img" src="http://dummyimage.com/628x150/"> <p> <label> Current url of img: <input id="img-url" type="text" readonly style="width:500px"> </label> </p> <p> <button class="img-reloader">Refresh</button> </p>

这工作很棒!但是,如果您多次重载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());
});

在html中:

foreach (var item in images) {
   <Img src="@Url.Content(item.ImageUrl+"?"+DateTime.Now)" > 
}