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

Question

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

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

есть:

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

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

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

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

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

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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

1. Сервер кеширует изображение
2. JQuery не запускается или по крайней мере не обновляет атрибут

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

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

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

Answer 4

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

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

Answer 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);
}

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

Иногда на самом деле решение вроде -

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

Answer 8

Вы пытались сбросить HTML-контейнеры изображений. Конечно, если браузер кеширует, это не поможет.

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

Answer 9

Использование "#" в качестве разделителя может быть полезным

Мои изображения хранятся в «скрытой» папке над «www», поэтому доступ к ним имеют только зарегистрированные пользователи. По этой причине я не могу использовать обычный <img src=/somefolder/1023.jpg>, но я отправляю запросы на сервер как <img src=?1023>, и он отвечает, отправляя обратно изображение, сохраненное под именем «1023».

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

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

Answer 10

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

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

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