So laden Sie ein Element (Bild) in jQuery neu / aktualisieren es

Ist es möglich, mit jQuery ein Bild mit einem identischen Dateinamen von einem Server neu zu laden?

Ich habe beispielsweise ein Bild auf einer Seite. Das physische Bild kann sich jedoch aufgrund von Benutzeraktionen ändern. Beachten Sie, dass dies nicht bedeutet, dass sich der Dateiname ändert, sondern die eigentliche Datei.

dh:

• Der Benutzer zeigt das Bild auf der Standardseite an
• Benutzer lädt neues Bild hoch
• Das Standardbild auf der Seite ändert sich nicht (ich gehe davon aus, dass der Dateiname identisch ist und der Browser die zwischengespeicherte Version verwendet).

Unabhängig davon, wie oft der folgende Code aufgerufen wird, bleibt das gleiche Problem bestehen.

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

In der jQuery-Dokumentation wäre die Funktion "Laden" perfekt, wenn sie eine Standardmethode zum Auslösen des Ereignisses hätte, anstatt eine Rückruffunktion an ein erfolgreiches / vollständiges Laden eines Elements zu binden.

Jede Unterstützung wird sehr geschätzt.

Es hört sich so an, als ob Ihr Browser das Bild zwischenspeichert (was ich jetzt bemerke, dass Sie in Ihrer Frage geschrieben haben). Sie können den Browser zwingen, das Bild neu zu laden, indem Sie eine zusätzliche Variable wie folgt übergeben:

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

Es ist wahrscheinlich nicht der beste Weg, aber ich habe dieses Problem in der Vergangenheit gelöst, indem ich einfach einen Zeitstempel mit JavaScript an die Bild-URL angehängt habe:

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

Beim nächsten Laden wird der Zeitstempel auf die aktuelle Zeit gesetzt und die URL ist unterschiedlich, sodass der Browser ein GET für das Bild ausführt, anstatt die zwischengespeicherte Version zu verwenden.

Dies könnte eines der beiden Probleme sein, die Sie selbst erwähnen.

1. Der Server speichert das Image zwischen
2. Die jQuery wird nicht ausgelöst oder aktualisiert das Attribut zumindest nicht

Um ehrlich zu sein, denke ich, dass es die Nummer zwei ist. Wäre viel einfacher, wenn wir mehr jQuery sehen könnten. Versuchen Sie jedoch zunächst, das Attribut zu entfernen und dann erneut festzulegen. Nur um zu sehen, ob das hilft:

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

Auch wenn dies funktioniert, poste etwas Code, da dies nicht optimal ist, imo :-)

mit einer Zeile ohne Sorgen um die Hardcodierung des Bild-src in das Javascript (danke an jeerose für die Ideen:

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

Um das Caching zu umgehen und das Hinzufügen von unendlichen Zeitstempeln zur Bild-URL zu vermeiden, entfernen Sie den vorherigen Zeitstempel, bevor Sie einen neuen hinzufügen. So habe ich es gemacht.

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

Das funktioniert super! Wenn Sie den src jedoch mehrmals neu laden, wird der Zeitstempel auch mit der URL verknüpft. Ich habe die akzeptierte Antwort geändert, um damit umzugehen.

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

Haben Sie versucht, die HTML-Bildcontainer zurückzusetzen? Wenn der Browser zwischenspeichert, hilft dies natürlich nicht.

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

Manchmal tatsächlich Lösung wie -

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

auch src nicht richtig aktualisieren, probier das aus, es hat bei mir funktioniert ->

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

Die Verwendung von "#" als Trennzeichen kann hilfreich sein

Meine Bilder werden in einem "versteckten" Ordner über "www" gespeichert, sodass nur angemeldete Benutzer Zugriff auf sie haben. Aus diesem Grund kann ich das normale nicht verwenden, <img src=/somefolder/1023.jpg>aber ich sende Anfragen wie an den Server <img src=?1023>und es antwortet, indem es das unter dem Namen '1023' gespeicherte Bild zurücksendet.

Die Anwendung wird zum Zuschneiden von Bildern verwendet. Nach einer Ajax-Anforderung zum Zuschneiden des Bildes wird es als Inhalt auf dem Server geändert, behält jedoch seinen ursprünglichen Namen bei. Um das Ergebnis des Zuschneidens anzuzeigen, wird nach Abschluss der Ajax-Anforderung das erste Bild aus dem DOM entfernt und ein neues Bild mit demselben Namen eingefügt <img src=?1023>.

Um ein Einlösen zu vermeiden, füge ich der Anfrage das "time" -Tag hinzu, dem "#" vorangestellt ist, damit es so wird <img src=?1023#1467294764124>. Der Server filtert automatisch den Hash-Teil der Anfrage heraus und antwortet korrekt, indem er mein als '1023' gespeichertes Bild zurücksendet. Somit bekomme ich immer die letzte Version des Bildes ohne viel serverseitige Dekodierung.

Möglicherweise muss ich die Bildquelle mehrmals neu laden. Ich habe mit Lodash eine Lösung gefunden , die für mich gut funktioniert:

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

Ein vorhandener Zeitstempel wird abgeschnitten und durch einen neuen ersetzt.

Basierend auf der Antwort von @kasper Taeymans.

Wenn Sie einfach ein neues Image benötigen (ersetzen Sie es nicht durch smth new), versuchen Sie Folgendes:

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

Ich mache das einfach in HTML:

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

Und laden Sie das Bild im Code dahinter wie folgt neu:

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

}}