Cara memuat ulang / menyegarkan elemen (gambar) di jQuery

Apakah mungkin memuat ulang gambar dengan nama file yang identik dari server menggunakan jQuery?

Misalnya, saya memiliki gambar pada halaman, namun, gambar fisik dapat berubah berdasarkan tindakan pengguna. Catatan, ini tidak berarti nama file berubah, tetapi file yang sebenarnya itu sendiri.

yaitu:

• Pengguna melihat gambar pada halaman default
• Pengguna mengunggah gambar baru
• Gambar default di halaman tidak berubah (saya menganggap ini karena nama file identik, browser menggunakan versi cache)

Terlepas dari seberapa sering kode di bawah ini dipanggil, masalah yang sama tetap ada.

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

Dalam dokumentasi jQuery, fungsi "load" akan sempurna jika memiliki metode default untuk menembakkan peristiwa yang bertentangan dengan pengikatan fungsi callback ke pemuatan elemen yang berhasil / lengkap.

Setiap bantuan sangat dihargai.

Kedengarannya seperti itu browser Anda yang sedang meng-cache gambar (yang sekarang saya perhatikan Anda tulis di pertanyaan Anda). Anda dapat memaksa browser untuk memuat ulang gambar dengan mengirimkan variabel tambahan seperti:

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

Ini mungkin bukan cara terbaik, tapi saya telah memecahkan masalah ini di masa lalu dengan hanya menambahkan stempel waktu ke URL gambar menggunakan JavaScript:

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

Lain kali ketika memuat, stempel waktu diatur ke waktu saat ini dan URL berbeda, sehingga browser melakukan GET untuk gambar alih-alih menggunakan versi cache.

Ini bisa menjadi salah satu dari dua masalah yang Anda sebutkan sendiri.

1. Server sedang melakukan caching gambar
2. JQuery tidak menyala atau setidaknya tidak memperbarui atribut

Sejujurnya, saya pikir ini nomor dua. Akan jauh lebih mudah jika kita bisa melihat lebih banyak jQuery. Tapi sebagai permulaan, coba hapus atributnya terlebih dahulu, lalu atur kembali. Hanya untuk melihat apakah itu membantu:

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

Bahkan jika ini berhasil, posting beberapa kode karena ini tidak optimal, imo :-)

dengan satu baris tanpa khawatir tentang hardcoding src gambar ke dalam javascript (terima kasih kepada jeerose untuk ide-ide:

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

Untuk mem-bypass caching dan menghindari menambahkan cap waktu tak terbatas ke url gambar, lepaskan cap waktu sebelumnya sebelum menambahkan yang baru, beginilah cara saya melakukannya.

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

Ini sangat bagus! namun jika Anda memuat ulang src beberapa kali, stempel waktu akan digabungkan ke url juga. Saya telah memodifikasi jawaban yang diterima untuk menghadapinya.

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

Sudahkah Anda mencoba mengatur ulang wadah gambar html. Tentu saja jika browser yang melakukan caching maka ini tidak akan membantu.

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

Beberapa kali sebenarnya solusi seperti -

$("#Image").attr("src", $('#srcVal').val()+"&"+Math.floor(Math.random()*1000));

juga tidak menyegarkan src dengan benar, coba ini, itu berhasil untuk saya ->

$("#Image").attr("src", "dummy.jpg");
$("#Image").attr("src", $('#srcVal').val()+"&"+Math.floor(Math.random()*1000));

Menggunakan "#" sebagai pembatas mungkin berguna

Gambar saya disimpan di folder "tersembunyi" di atas "www" sehingga hanya pengguna yang login yang diizinkan mengaksesnya. Untuk alasan ini saya tidak bisa menggunakan yang biasa <img src=/somefolder/1023.jpg>tapi saya mengirim permintaan ke server seperti<img src=?1023> dan itu merespon dengan mengirim kembali gambar yang disimpan dengan nama '1023'.

Aplikasi ini digunakan untuk memotong gambar, jadi setelah permintaan ajax untuk memotong gambar, itu diubah sebagai konten di server tetapi tetap menggunakan nama aslinya. Untuk melihat hasil pemangkasan, setelah permintaan ajax selesai, gambar pertama dihapus dari DOM dan gambar baru dimasukkan dengan nama yang sama<img src=?1023> .

Untuk menghindari menguangkan saya menambahkan ke permintaan tag "waktu" yang diawali dengan "#" sehingga menjadi seperti <img src=?1023#1467294764124>. Server secara otomatis menyaring bagian hash permintaan dan merespons dengan benar dengan mengirim kembali gambar saya disimpan sebagai '1023'. Jadi saya selalu mendapatkan versi terakhir dari gambar tanpa banyak decoding sisi server.

Saya mungkin harus memuat ulang sumber gambar beberapa kali. Saya menemukan solusi dengan Lodash yang berfungsi baik untuk saya:

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

Stempel waktu yang ada akan dipotong dan diganti dengan yang baru.

Berdasarkan jawaban @kasper Taeymans.

Jika Anda hanya perlu memuat ulang gambar (bukan ganti src dengan smth baru), coba:

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

Saya cukup melakukan ini di html:

<script>
    $(document).load(function () {
        d = new Date();
        $('#<%= imgpreview.ClientID %>').attr('src','');
    });
</script>

Dan muat ulang gambar dalam kode di belakang seperti ini:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        image.Src = "/image.jpg"; //url caming from database
    }

}