JQuery'de bir öğe (görüntü) nasıl yeniden yüklenir / yenilenir

JQuery kullanarak bir sunucudan aynı dosya adına sahip bir görüntüyü yeniden yüklemek mümkün müdür?

Örneğin, bir sayfada bir görüntü var, ancak fiziksel görüntü kullanıcı eylemlerine göre değişebilir. Bu, dosya adının değiştiği anlamına gelmez, gerçek dosyanın kendisi olduğunu unutmayın.

yani:

• Kullanıcı görüntüyü varsayılan sayfada görüntüler
• Kullanıcı yeni resim yükler
• Sayfadaki varsayılan görüntü değişmiyor (bunun dosya adının aynı olması nedeniyle olduğunu düşünüyorum, tarayıcı önbelleğe alınmış sürümü kullanıyor)

Aşağıdaki kodun ne sıklıkta adlandırıldığına bakılmaksızın, aynı sorun devam etmektedir.

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

JQuery belgelerinde "load" işlevi, bir öğenin başarılı / tam yüküne geri çağrı işlevini bağlamak yerine olayı tetiklemek için varsayılan bir yöntemi olsaydı mükemmel olurdu.

Herhangi bir yardım büyük beğeni topluyor.

Görünüşe göre tarayıcınız görüntüyü önbelleğe alıyor (ki şimdi sorunuzda yazdığını fark ediyorum). Aşağıdaki gibi ekstra bir değişken ileterek tarayıcıyı görüntüyü yeniden yüklemeye zorlayabilirsiniz:

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

Muhtemelen en iyi yol değildir, ancak geçmişte bu sorunu JavaScript kullanarak resim URL'sine bir zaman damgası ekleyerek çözdüm:

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

Bir dahaki sefer yüklendiğinde, zaman damgası geçerli saate ayarlanır ve URL farklıdır, bu nedenle tarayıcı önbelleğe alınmış sürümü kullanmak yerine resim için bir GET yapar.

Bu, kendinizden bahsettiğiniz iki problemden biri olabilir.

1. Sunucu görüntüyü önbelleğe alıyor
2. JQuery tetiklenmiyor veya en azından özelliği güncellemiyor

Dürüst olmak gerekirse, bence ikinci. Biraz daha jQuery görebilseydik çok daha kolay olurdu. Ancak bir başlangıç ​​için önce özniteliği kaldırmayı ve sonra yeniden ayarlamayı deneyin. Bunun işe yarayıp yaramadığını görmek için:

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

Bu işe yarar olsa bile, bu optimal olmadığından bazı kodlar gönderin, imo :-)

image src'yi javascript'e kodlamaktan endişe etmeyen bir çizgi ile (fikirler için jeerose'a teşekkürler:

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

Önbelleği atlamak ve görüntü URL'sine sonsuz zaman damgası eklemekten kaçınmak için, yeni bir tane eklemeden önce önceki zaman damgasını sıyırın, bu şekilde yaptım.

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

Harika çalışıyor! ancak src'yi birden çok kez yeniden yüklerseniz, zaman damgası da url ile birleştirilir. Kabul edilen cevabı bununla başa çıkacak şekilde değiştirdim.

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

Resim kapsayıcılarını html'yi sıfırlamayı denediniz mi? Tabii ki önbellekleme tarayıcısıysa bu yardımcı olmaz.

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

Bazı zamanlar aslında çözüm gibi -

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

Ayrıca src'yi düzgün bir şekilde yenilemeyin, bunu deneyin, benim için çalıştı ->

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

Sınırlayıcı olarak "#" kullanmak yararlı olabilir

Resimlerim "www" nin üstünde "gizli" bir klasörde tutulur, böylece yalnızca kayıtlı kullanıcıların bunlara erişmesine izin verilir. Bu nedenle sıradan kullanamıyorum <img src=/somefolder/1023.jpg>ama sunucuya gibi istekleri <img src=?1023>gönderiyorum ve '1023' adı altında tutulan görüntüyü geri göndererek yanıt veriyor.

Uygulama görüntü kırpma için kullanılır, bu nedenle görüntüyü kırpmak için bir ajax isteğinden sonra, sunucudaki içerik olarak değiştirilir, ancak orijinal adı korunur. Kırpmanın sonucunu görmek için, ajax isteği tamamlandıktan sonra, ilk görüntü DOM'dan kaldırılır ve aynı ada sahip yeni bir görüntü eklenir <img src=?1023>.

Nakit ödeme önlemek için isteği "#" ile eklenmiş "zaman" etiketini eklemek, böylece gibi olur <img src=?1023#1467294764124>. Sunucu, isteğin karma kısmını otomatik olarak filtreler ve resmimi '1023' olarak geri göndererek doğru yanıt verir. Böylece her zaman çok fazla sunucu tarafı kod çözme olmadan görüntünün son sürümünü alıyorum.

Görüntü kaynağını birkaç kez yeniden yüklemem gerekebilir. Lodash ile benim için iyi çalışan bir çözüm buldum :

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

Mevcut bir zaman damgası kesilecek ve yenisiyle değiştirilecektir.

@Kasper Taeymans'ın cevabına dayanarak.

Eğer sadece görüntüyü yeniden yüklemeniz gerekiyorsa (src'yi smth new ile değiştirmeyin) deneyin:

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

Ben sadece html bunu yapmak:

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

Ve arkasındaki koddaki görüntüyü şu şekilde yeniden yükleyin:

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

}