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

Posted

技术标签:

【中文标题】如何在 jQuery 中重新加载/刷新元素(图像)【英文标题】:How to reload/refresh an element(image) in jQuery 【发布时间】:2011-01-07 11:27:28 【问题描述】:

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

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

即:

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

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

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

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

非常感谢任何帮助。

【问题讨论】:

@Alexis,你的问题是图片缓存在浏览器中,在服务器上更改后不会更新吗? @jeerose,我相信这是问题所在,因为文件实际上确实发生了变化(相同的文件名),并且如果您进行整页刷新,它会反映在页面上。 【参考方案1】:

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

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

【讨论】:

添加一个查询字符串变量完全超出了我的想象。这解决了它,图像现在根据请求重新加载。 它有效,这是一个很好的解决方法,但仍然是一个解决方法!有没有不同的方式来获取图像告诉浏览器忘记缓存的图像? 我有一个非常挑剔的网络摄像头,它似乎禁止任何对包含参数的静态图像的请求。啊。否则这是一个很好的解决方案。 第一个谷歌结果,所以..这是我的首选方法,因为它始终适用于任何浏览器和服务器..但否则您可以使用 htaccess 文件或通过客户端脚本提供图像。这些是一种更简洁的方法,并允许其他功能和用途 @TomasGonzalez B/c 有可能与random发生冲突,除非你是 真的真的快。 ;^) 在客户端上获取日期并不占用大量资源,您可以一次提取尽可能多的图像,因此请继续执行第 4 步。利润。【参考方案2】:

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

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

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

【讨论】:

这为我工作了多年,但今天我的图像服务器(不受我控制)如果文件名不准确,就会开始返回断开的链接。如果有人有另一种解决方法,将不胜感激。不幸的是,这个帖子中的每个答案都是这个帖子的变体。 @felwithe,可能这个服务器在查询结束时只查找扩展名?所以你可以尝试测试这种方法:imagename.jpg?t=1234567&q=.jpgimagename.jpg#t1234567.jpg【参考方案3】:

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

    服务器正在缓存图片 jQuery 不会触发或至少不会更新属性

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

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

即使这可行,请发布一些代码,因为这不是最佳的,imo :-)

【讨论】:

@Kordonme,这是有人讨论“坏”jQuery 的地方吗? (我在开玩笑,我在开玩笑);) @Kordonme,这实际上保存在事件处理程序中,目前是唯一的代码行。我在此行之前添加了一个警报,只是为了验证事件是否实际触发。事件触发没有错误。 我有一个非常挑剔的网络摄像头,它似乎禁止任何对包含参数的静态图像的请求。啊。对于我的独特案例,这是一个很好的解决方案。谢谢。 如果您不想要/不需要残差参数,这是最好的答案 感谢这个帮助(它只在 Chrome 中为我缓存)【参考方案4】:

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

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

【讨论】:

请小心,因为这会在 URL 的末尾无限添加越来越多的字符【参考方案5】:

要绕过缓存避免将无限时间戳添加到图像 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);

【讨论】:

【参考方案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());
);

【讨论】:

【参考方案7】:

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

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

【讨论】:

【参考方案8】:

有时实际上解决方案像 -

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

【讨论】:

【参考方案9】:

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

我的图像保存在“www”上方的“隐藏”文件夹中,因此只有登录的用户才能访问它们。出于这个原因,我不能使用普通的&lt;img src=/somefolder/1023.jpg&gt;,但我向服务器发送请求,如&lt;img src=?1023&gt;,它通过发回名称为“1023”的图像来响应。

该应用程序用于图像裁剪,因此在 ajax 请求裁剪图像后,它在服务器上更改为内容,但保留其原始名称。为了查看裁剪的结果,在ajax请求完成后,将第一张图片从DOM中移除,并插入一个同名&lt;img src=?1023&gt;的新图片。

为了避免兑现,我在请求中添加了以“#”开头的“时间”标签,这样它就变成了&lt;img src=?1023#1467294764124&gt;。服务器会自动过滤掉请求的哈希部分,并通过发回我保存为“1023”的图像来正确响应。因此,我总是在没有太多服务器端解码的情况下获得图像的最新版本。

【讨论】:

为什么要费尽心思来提供图片?似乎是一个毫无意义的麻烦【参考方案10】:

基于@kasper Taeymans 的回答。

如果你只是需要重新加载图片(不是用 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>

【讨论】:

【参考方案11】:

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

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

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

【讨论】:

【参考方案12】:

如果您需要刷新确切的 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,服务器指示客户端缓存图像的时间超过了应有的时间。

如果这仍然没有为您刷新图像,请查看this answer helps。如需更多信息,请参阅Cache-Control request header 上的文档。

【讨论】:

【参考方案13】:

在html中:

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

【讨论】:

这个问题是关于客户端请求从服务器重新加载图像,使用 jQuery(或者可能是本机 ECMAScript)。您的回答虽然有效,但使用的是不同的语言【参考方案14】:

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

【讨论】:

在 asp.NET WebForms 中重新加载页面和设置并不是真正的主题。

以上是关于如何在 jQuery 中重新加载/刷新元素(图像)的主要内容,如果未能解决你的问题,请参考以下文章

如何在 CollectionView iOS 中停止自动重新加载和刷新图像

使用浏览器后退按钮时如何强制重新加载页面?

如何在不刷新的情况下执行 jquery ajax 来重新加载我的数据

如何使用 jquery 检测页面刷新?

如何重新加载数据表(jquery)数据?

使用 jQuery 更新脚本标签的 src - 使用 jQuery 重新加载脚本而不刷新页面