如何在jQuery中重新加载/刷新元素(图像)

Question

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

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

即:

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

无论下面的代码被调用的频率如何,同样的问题仍然存在.

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

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

非常感谢任何帮助.

Answer 1

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

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

Answer 2

这可能不是最好的方法,但我过去通过使用JavaScript向图像URL附加时间戳来解决这个问题:

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

下次加载时,时间戳设置为当前时间且URL不同,因此浏览器对图像执行GET而不是使用缓存版本.

Answer 3

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

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

说实话,我认为这是第二名.如果我们能看到更多jQuery,那将会容易得多.但首先,请先尝试删除该属性,然后再重新设置.只是为了看看是否有帮助:

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

即使这样可行,也可以发布一些代码,因为这不是最佳的,imo :-)

Answer 4

一行不用担心将图像src硬编码到javascript中(感谢jeerose的想法:

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

Answer 5

要绕过缓存并避免向图像URL添加无限时间戳,请在添加新时间戳之前删除上一个时间戳,这就是我所做的.

//refresh the image every 60seconds
var xyro_refresh_timer = setInterval(xyro_refresh_function, 60000);

function xyro_refresh_function(){
//refreshes an image with a .xyro_refresh class regardless of caching
    //get the src attribute
    source = jQuery(".xyro_refresh").attr("src");
    //remove previously added timestamps
    source = source.split("?", 1);//turns "image.jpg?timestamp=1234" into "image.jpg" avoiding infinitely adding new timestamps
    //prep new src attribute by adding a timestamp
    new_source = source + "?timestamp="  + new Date().getTime();
    //alert(new_source); //you may want to alert that during developement to see if you're getting what you wanted
    //set the new src attribute
    jQuery(".xyro_refresh").attr("src", new_source);
}

Answer 6

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