html点击重新载入图片,如何在jQuery中重新加载/刷新元素（图像）

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

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

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

即：

用户在默认页面上查看图像

用户上传新图像

页面上的默认图像不会更改(我假设这是由于文件名相同，浏览器使用缓存版本)

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

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

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

非常感谢任何帮助。

Alexis Abril asked 2019-02-18T14:40:03Z

12个解决方案

502 votes

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

d = new Date();

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

jay answered 2019-02-18T14:40:20Z

51 votes

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

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

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

Kaleb Brasee answered 2019-02-18T14:40:58Z

24 votes

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

服务器正在缓存图像

jQuery不会触发或至少不更新属性

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

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

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

Kordonme answered 2019-02-18T14:42:04Z

14 votes

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

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

Radu answered 2019-02-18T14:42:39Z

9 votes

要绕过缓存并避免向图像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);

}

sEver answered 2019-02-18T14:43:14Z

6 votes

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

});

kasper Taeymans answered 2019-02-18T14:43:50Z

2 votes

您是否尝试过重置图像容器html。 当然，如果它是缓存的浏览器，那么这将无济于事。

function imageUploadComplete () {

$("#image_container").html("");

}

Matti Lyra answered 2019-02-18T14:44:21Z

2 votes

有时候实际解决方案如下 -

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

也没有正确刷新src，尝试这个，它对我有用 - ＆gt;

$("#Image").attr("src", "dummy.jpg");

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

Kulbhushan Chaskar answered 2019-02-18T14:45:31Z

1 votes

使用“＃”作为分隔符可能很有用

我的图像保存在“www”上方的“隐藏”文件夹中，以便只允许记录的用户访问它们。 出于这个原因，我不能使用普通的，但我向服务器发送请求，如，它通过发回保存在名称'1023'下的图像来响应。

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

为了避免兑现，我在请求中添加了“＃”前面的“time”标记，因此它变成了.服务器自动过滤掉请求的哈希部分，并通过发送回保存为'1023'的图像来正确响应。 因此，我总是得到图像的最后一个版本而没有太多的服务器端解码。

user3506298 answered 2019-02-18T14:46:27Z

0 votes

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

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

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

slp answered 2019-02-18T14:47:03Z

-1 votes

基于@kasper Taeymans的回答。

如果你只需要重新加载图像(不要用smth new替换它的src)，试试：

Current url of img:

Refresh

Current url of img:

Refresh

userlond answered 2019-02-18T14:47:46Z

-2 votes

我只是在html中这样做：

$(document).load(function () {

d = new Date();

$('#').attr('src','');

});

并在代码后面重新加载图像，如下所示：

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

image.Src = "/image.jpg"; //url caming from database

}

}

FTheGodfather answered 2019-02-18T14:48:22Z