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

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

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

即:

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

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

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

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

任何援助非常感谢。

11 Solutions collect form web for “如何在jQuery中重新加载/刷新元素(图片)”

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

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

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

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

下次加载时,时间戳设置为当前时间,URL不同,所以浏览器为图像执行GET,而不是使用caching版本。

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

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

说实话,我认为这是第二。 如果我们可以看到更多的jQuery,会容易得多。 但是,首先尝试删除属性,然后重新设置。 只是为了看看是否有帮助:

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

即使这个工作,张贴一些代码,因为这不是最佳的,imo 🙂

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

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

要绕过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); } 

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

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

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

有时候实际上解决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)); 

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

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

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

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

基于@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> 

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

}

  • 我怎样才能validation谷歌reCAPTCHA V2使用javascript / jQuery?
  • ReactJS SyntheticEvent stopPropagation()仅适用于React事件?
  • 获取屏幕的大小,当前网页和浏览器窗口
  • jQuery Force为iframe设置src属性
  • 使用jQuery.support检测IE6
  • 在'click'事件中检查Ctrl / Shift / Alt键
  • ASP.Net主页面和文件path问题
  • Google Chart在x轴上绘制趋势线
  • 获取选定元素的外部HTML
  • Ajax上传图片
  • 如何在jQuery中select具有特定ID的所有元素?