Як перезавантажити / оновити елемент (зображення) в jQuery

Чи можливо перезавантажити зображення з однаковим іменем файлу з сервера за допомогою jQuery?

Наприклад, у мене є зображення на сторінці, однак фізичне зображення може змінюватися залежно від дій користувача. Зауважте, це означає не зміни файлу, а власне самого файлу.

тобто:

• Користувач переглядає зображення на сторінці за замовчуванням
• Користувач завантажує нове зображення
• Зображення за замовчуванням на сторінці не змінюється (я припускаю, це пов’язано з тим, що ім'я файлу однакове; браузер використовує кешовану версію)

Незалежно від того, як часто викликується код нижче, ця проблема зберігається.

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

У документації jQuery функція "load" була б ідеальною, якби у неї був метод за замовчуванням запуску події на відміну від прив'язки функції зворотного виклику до успішного / повного завантаження елемента.

Будь-яка допомога дуже вдячна.

Це здається, що ваш браузер кешує зображення (яке я зараз помічаю, ви написали у своєму запитанні). Ви можете змусити браузер перезавантажити зображення, передавши додаткову змінну на зразок:

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

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

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

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

Це може бути однією з двох проблем, про які ви згадуєте себе.

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

Якщо чесно, я думаю, що це номер два. Було б набагато простіше, якби ми могли побачити ще який-небудь jQuery. Але для початку спробуйте спочатку видалити атрибут, а потім встановіть його ще раз. Просто, щоб побачити, чи це допомагає:

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

Навіть якщо це працює, опублікуйте якийсь код, оскільки це не оптимально, imo :-)

з одним рядком, який не турбується про жорстке кодування зображення 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
    }

}