如何在jQuery中重新加载/刷新元素（图片）

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

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

即：

• 用户在默认页面上查看图像
• 用户上传新图片
• 页面上的默认图像不会改变（我认为这是由于文件名称相同，浏览器使用caching版本）

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

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

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

任何援助非常感谢。

Answer 1

这听起来像是你的浏览器caching图像（我现在注意到你在你的问题中写的）。 您可以通过传递一个额外的variables来强制浏览器重新加载图像，如下所示：

 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，而不是使用caching版本。

Answer 3

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

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

说实话，我认为这是第二。 如果我们可以看到更多的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

要绕过caching， 并避免添加无限的时间戳到图像的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()); }); 

Answer 7

你有没有尝试重置图像容器的HTML。 当然，如果这是浏览器caching，那么这将无济于事。

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

Answer 8

有时候实际上解决scheme就像

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

Answer 9

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

我的图像保存在“www”上方的“隐藏”文件夹中，以便只有login的用户可以访问它们。 因为这个原因，我不能使用普通的<img src=/somefolder/1023.jpg>而是像<img src=?1023>那样向服务器发送请求，并且通过发回保存在名字“1023”下的图像来响应。

该应用程序用于图像裁剪，所以在ajax请求裁剪图像后，它将作为服务器上的内容更改，但保留其原始名称。 为了看到裁剪的结果，在ajax请求完成之后，第一个图像被从DOM中移除，并且新图像被插入同名的<img src=?1023> 。

为了避免出现现金，我在请求中添加了“＃”前缀的“time”标签，使其变得像<img src=?1023#1467294764124> 。 服务器自动过滤出请求的散列部分，并通过发回保留为“1023”的图像来正确响应。 因此，我总是得到图像的最后一个版本，没有太多的服务器端解码。

Answer 10

基于@kasper Taeymans的回答。

如果你只是需要重新加载图像（而不是用新的smrreplace它的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> 

Answer 11

我只是在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 } 

}