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

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

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

即:

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

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

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

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

非常感谢任何帮助。

310122 次浏览
小开
最佳答案

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

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

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

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

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

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

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

小开

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

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

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

小开

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

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

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

$("#myimg").attr("src", $("#myimg").attr("src")+"?timestamp=" + new Date().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));
小开

为了绕过缓存而且，避免向图像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);
}
小开

这工作很棒!但是，如果您多次重载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的回答。

如果你只是需要重新加载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>

小开

我只是在html中这样做:

<script>
$(document).load(function () {
d = new Date();
$('#<%= imgpreview.ClientID %>').attr('src','');
});
</script>

然后在后面的代码中重新加载图像，就像这样:

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
image.Src = "/image.jpg"; //url caming from database
}

｝

小开

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

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

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

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

小开

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

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

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

小开

如果您需要刷新确切的URL，而您的浏览器已经缓存了图像，那么您可以使用AJAX和请求头迫使浏览器下载新的副本(即使它还没有过期)。你可以这样做:

var img = $("#myimg");
var url = img.attr("src");
$.ajax({
url: url,
headers: { "Cache-Control": "no-cache" }
}).done(function(){
// Refresh is complete, assign the image again
img.attr("src", url);
});

其他方法对我都不起作用，因为在查询字符串中添加令牌会下载新图像，但它不会使缓存中的旧URL中的图像无效，因此未来的请求将继续显示旧图像。旧的URL是唯一发送到浏览器的URL，服务器指示客户机缓存图像的时间超过了它应该缓存的时间。

如果这仍然没有为你刷新图像，看看这个答案很有帮助.;有关更多信息，这里是关于Cache-Control请求头的文档。

小开

在html中:

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

提交答案