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

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

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

т

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

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

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

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

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

ОТВЕТЫ

Ответ 1

Похоже, ваш браузер кэширует изображение (которое я теперь замечаю, что вы написали в своем вопросе). Вы можете заставить браузер перезагрузить изображение, передав дополнительную переменную следующим образом:

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

Ответ 2

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

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

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

Ответ 3

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

  • Сервер кэширует изображение
  • jQuery не запускает или, по крайней мере, не обновляет атрибут

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

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

Даже если это работает, опубликуйте некоторый код, поскольку это не оптимально, imo: -)

Ответ 4

с одной строкой, не заботясь о жестком кодировании изображения src в javascript (благодаря издевательствам за идеи:

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

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

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

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

Ответ 10

Основываясь на ответе @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>

Ответ 11

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

}