Как перезагрузить / обновить элемент (изображение) в jQuery

Это, вероятно, не лучший способ, но я решил эту проблему в прошлом, просто добавив метку времени к URL-адресу изображения с помощью JavaScript:

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

при следующей загрузке метка времени устанавливается на текущее время, а URL-адрес отличается, поэтому браузер выполняет GET для изображения вместо использования кэшированной версии.

Это может быть одна из двух проблем, которые вы упоминаете себя.

1. сервер кэширует изображение
2. jQuery не срабатывает или, по крайней мере, не обновляет атрибут

честно говоря, я думаю, что это номер два. Было бы намного проще, если бы мы могли увидеть еще несколько jQuery. Но для начала попробуйте сначала удалить атрибут, а затем установить его снова. Просто чтобы увидеть, если это поможет:

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

даже если это работает, пост какой-то код с это не оптимально, ИМО :-)

С одной строкой, не беспокоясь о жестком кодировании изображения 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", так что только зарегистрированные пользователи имеют доступ к ним. По этой причине я не могу использовать обычный <img src=/somefolder/1023.jpg> но я отправляю запросы на сервер, как <img src=?1023> и он отвечает, отправляя обратно изображение, хранящееся под именем '1023'.

приложение используется для обрезки изображений, поэтому после запроса ajax для обрезки изображения оно изменяется как содержимое на сервере, но сохраняет его исходное имя. Чтобы увидеть результат обрезки, после завершения запроса ajax первое изображение удаляется из DOM и вставляется новое изображение с тем же именем <img src=?1023>.

чтобы избежать обналичивания, я добавляю в запрос тег "time" с добавлением"#", поэтому он становится похожим на <img src=?1023#1467294764124>. Сервер автоматически отфильтровывает хэш-часть запроса и правильно отвечает, отправляя обратно мое изображение, сохраненное как "1023". Таким образом я всегда получаю последнюю версию образа без особого декодирования на стороне сервера.

Я, возможно, придется перезагрузить Источник изображения несколько раз. Я нашел решение с Лодашь это хорошо работает для меня:

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

существующая метка времени будет усечена и заменена новой.

на основе ответа @kasper Taeymans.

Если вам просто нужно перезагрузить изображение (не замените его src на smth new), попробуйте:

$(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
    }

}