Question

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

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

即：

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

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

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

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

非常感谢任何帮助。

Answer 1

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

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

Answer 3

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

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

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

要绕过缓存和避免向图片网址添加无限时间戳，请在添加新的时间戳之前删除上一个时间戳，这就是我的方法。

//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。当然，如果它是缓存的浏览器，那么这将无济于事。

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

Answer 8

有时实际解决方案如 -

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

Answer 9

使用＆＃34;＃＆＃34;作为分隔符可能有用

我的图片保存在＆＃34;隐藏＆＃34;上面的文件夹＆＃34; www＆＃34;这样只允许记录的用户访问它们。出于这个原因，我无法使用普通的<img src=/somefolder/1023.jpg>，但我向服务器发送请求，例如<img src=?1023>，并通过发回保存在名称＆＃39; 1023＆＃39;内的图像来响应。

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

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

Answer 10

我可能不得不多次重新加载图像源。我找到了Lodash的解决方案，该解决方案很适合我：

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

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

Answer 11

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

Answer 12

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

}

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

12 个答案:

使用＆＃34;＃＆＃34;作为分隔符可能有用