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

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

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

ie:

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

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

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

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

非常感谢任何帮助。

当前回答

在html中:

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

其他回答

在html中:

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

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

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

下次加载时，时间戳被设置为当前时间，URL也不同，因此浏览器对图像执行GET操作，而不是使用缓存的版本。

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

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

有时候解是这样的

$("#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));

使用“#”作为分隔符可能会有用

我的图像保存在“www”上面的“隐藏”文件夹中，这样只有登录用户才能访问它们。由于这个原因，我不能使用普通的<img src=/somefolder/1023.jpg>，但我发送请求到服务器像<img src=?1023>，它通过发回名称为'1023'的图像进行响应。

该应用程序用于裁剪图像，因此在ajax请求裁剪图像后，它将作为服务器上的内容进行更改，但保留其原始名称。为了查看裁剪的结果，在ajax请求完成后，将从DOM中删除第一个图像，并插入一个具有相同名称的新图像<img src=?1023>。

为了避免兑现，我在请求中添加了“时间”标签，前面加了“#”，这样它就变成了<img src=?1023#1467294764124>。服务器会自动过滤掉请求的哈希部分，并通过发送我的“1023”图像来正确响应。因此，我总是得到图像的最后一个版本，而没有太多的服务器端解码。

推荐文章