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

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

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

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

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

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

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

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

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

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

即使这样,也要发布一些代码,因为这不是最佳的,imo:-)

只需一行代码,不用担心将image-src硬编码到javascript中(这要归功于Jeerose的想法:

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

绕过缓存 和 避免向图像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。当然,如果是浏览器在缓存,那么这不会有帮助。

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

有时实际解决方案是-

$("#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”上面的“hidden”文件夹中,这样只有登录的用户才可以访问它们。因此我不能用普通的 <img src=/somefolder/1023.jpg> 但是我向服务器发送请求就像 <img src=?1023> 它的反应是将保存在“1023”下的图像发回。

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

为了避免兑现,我在请求中添加了“时间”标签,前面加了“”,所以它变得像 <img src=?1023#1467294764124> . 服务器自动筛选出请求的散列部分,并通过发送回保留为“1023”的图像来正确响应。因此,我总是在没有太多服务器端解码的情况下得到图像的最后一个版本。

我可能需要多次重新加载图像源。我找到了一个解决方案 Lodash 这对我很有效:

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

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

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

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

}