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

Question

Можно ли перезагрузить изображение с идентичным именем файла с сервера с помощью jQuery?

Например, у меня есть изображение на странице, однако физическое изображение может меняться в зависимости от действий пользователя. Обратите внимание, это не означает, что имя файла изменяется, а сам файл.

есть:

• Пользователь просматривает изображение на странице по умолчанию
• Пользователь загружает новое изображение
• Изображение по умолчанию на странице не изменяется (я полагаю, это связано с тем, что имя файла идентично, браузер использует кешированную версию)

Независимо от того, как часто вызывается приведенный ниже код, одна и та же проблема сохраняется.

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

В документации jQuery функция «load» была бы идеальной, если бы у нее был метод запуска события по умолчанию, а не привязка функции обратного вызова к успешной / полной загрузке элемента.

Любая помощь очень ценится.

Answer 1

Я просто делаю это в 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
    }

}

Answer 2

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

Если вам просто нужно перезагрузить образ (не заменять его 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>