jQuery-Rückruf beim Laden des Bildes (auch wenn das Bild zwischengespeichert ist)

Ich will das tun:

$("img").bind('load', function() {
  // do stuff
});

Das Ladeereignis wird jedoch nicht ausgelöst, wenn das Bild aus dem Cache geladen wird. Die jQuery-Dokumente schlagen ein Plugin vor , um dies zu beheben, aber es funktioniert nicht

Wenn das srcbereits festgelegt ist, wird das Ereignis im zwischengespeicherten Fall ausgelöst, bevor Sie den Ereignishandler überhaupt gebunden bekommen. Um dies zu beheben, können Sie das Ereignis .completewie folgt überprüfen und auslösen :

$("img").one("load", function() {
  // do stuff
}).each(function() {
  if(this.complete) {
      $(this).load(); // For jQuery < 3.0 
      // $(this).trigger('load'); // For jQuery >= 3.0 
  }
});

Beachten Sie den Wechsel von .bind()zu, .one()damit der Ereignishandler nicht zweimal ausgeführt wird.

Kann ich vorschlagen, dass Sie es erneut in ein Nicht-DOM-Bildobjekt laden? Wenn es zwischengespeichert ist, dauert dies überhaupt keine Zeit und die Onload wird immer noch ausgelöst. Wenn es nicht zwischengespeichert ist, wird der Onload ausgelöst, wenn das Image geladen wird. Dies sollte die gleiche Zeit sein, zu der die DOM-Version des Images den Ladevorgang beendet hat.

Javascript:

$(document).ready(function() {
    var tmpImg = new Image() ;
    tmpImg.src = $('#img').attr('src') ;
    tmpImg.onload = function() {
        // Run onload code.
    } ;
}) ;

Aktualisiert (um mehrere Bilder zu verarbeiten und mit korrekt bestelltem Onload-Anhang):

$(document).ready(function() {
    var imageLoaded = function() {
        // Run onload code.
    }
    $('#img').each(function() {
        var tmpImg = new Image() ;
        tmpImg.onload = imageLoaded ;
        tmpImg.src = $(this).attr('src') ;
    }) ;
}) ;

Meine einfache Lösung, es benötigt kein externes Plugin und sollte für häufige Fälle ausreichen:

/**
 * Trigger a callback when the selected images are loaded:
 * @param {String} selector
 * @param {Function} callback
  */
var onImgLoad = function(selector, callback){
    $(selector).each(function(){
        if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
            callback.apply(this);
        }
        else {
            $(this).on('load', function(){
                callback.apply(this);
            });
        }
    });
};

benutze es so:

onImgLoad('img', function(){
    // do stuff
});

Zum Einblenden Ihrer Bilder beim Laden können Sie beispielsweise Folgendes tun:

$('img').hide();
onImgLoad('img', function(){
    $(this).fadeIn(700);
});

Oder alternativ, wenn Sie einen jquery-Plugin-ähnlichen Ansatz bevorzugen:

/**
 * Trigger a callback when 'this' image is loaded:
 * @param {Function} callback
 */
(function($){
    $.fn.imgLoad = function(callback) {
        return this.each(function() {
            if (callback) {
                if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
                    callback.apply(this);
                }
                else {
                    $(this).on('load', function(){
                        callback.apply(this);
                    });
                }
            }
        });
    };
})(jQuery);

und benutze es so:

$('img').imgLoad(function(){
    // do stuff
});

beispielsweise:

$('img').hide().imgLoad(function(){
    $(this).fadeIn(700);
});

Müssen Sie das wirklich mit jQuery machen? Sie können das onloadEreignis auch direkt an Ihr Bild anhängen .

<img src="/path/to/image.jpg" onload="doStuff(this);" />

Es wird jedes Mal ausgelöst, wenn das Bild geladen wurde, aus dem Cache oder nicht.

Sie können diesen Code auch mit Unterstützung für Ladefehler verwenden:

$("img").on('load', function() {
  // do stuff on success
})
.on('error', function() {
  // do stuff on smth wrong (error 404, etc.)
})
.each(function() {
    if(this.complete) {
      $(this).load();
    } else if(this.error) {
      $(this).error();
    }
});

Ich hatte gerade dieses Problem selbst und suchte überall nach einer Lösung, bei der ich meinen Cache nicht tötete oder ein Plugin herunterlud.

Ich habe diesen Thread nicht sofort gesehen, also habe ich stattdessen etwas anderes gefunden, das eine interessante Lösung darstellt und (ich denke) es wert ist, hier veröffentlicht zu werden:

$('.image').load(function(){
    // stuff
}).attr('src', 'new_src');

Ich habe diese Idee tatsächlich aus den Kommentaren hier erhalten: http://www.witheringtree.com/2009/05/image-load-event-binding-with-ie-using-jquery/

Ich habe keine Ahnung, warum es funktioniert, aber ich habe dies auf IE7 getestet und wo es kaputt gegangen ist, bevor es jetzt funktioniert.

Ich hoffe es hilft,

Bearbeiten

Die akzeptierte Antwort erklärt tatsächlich, warum:

Wenn der src bereits festgelegt ist, wird das Ereignis im Cache ausgelöst, bevor der Ereignishandler gebunden wird.

Indem Sie mit jQuery ein neues Bild mit dem src des Bildes generieren und die Lademethode direkt diesem zuweisen, wird die Lademethode erfolgreich aufgerufen, wenn jQuery die Generierung des neuen Bildes abgeschlossen hat. Dies funktioniert für mich in IE 8, 9 und 10

$('<img />', {
    "src": $("#img").attr("src")
}).load(function(){
    // Do something
});

Eine Lösung, die ich gefunden habe https://bugs.chromium.org/p/chromium/issues/detail?id=7731#c12 (Dieser Code stammt direkt aus dem Kommentar)

var photo = document.getElementById('image_id');
var img = new Image();
img.addEventListener('load', myFunction, false);
img.src = 'http://newimgsource.jpg';
photo.src = img.src;

Eine Modifikation des GUS-Beispiels:

$(document).ready(function() {
    var tmpImg = new Image() ;
    tmpImg.onload = function() {
        // Run onload code.
    } ;

tmpImg.src = $('#img').attr('src');
})

Stellen Sie die Quelle vor und nach dem Onload ein.

Fügen Sie das src-Argument einfach in einer separaten Zeile hinzu, nachdem das img-Objekt definiert wurde. Dies wird den IE dazu bringen, das Lad-Ereignis auszulösen. Es ist hässlich, aber es ist die einfachste Problemumgehung, die ich bisher gefunden habe.

jQuery('<img/>', {
    src: url,
    id: 'whatever'
})
.load(function() {
})
.appendTo('#someelement');
$('#whatever').attr('src', url); // trigger .load on IE

Ich kann Ihnen einen kleinen Tipp geben, wenn Sie dies möchten:

<div style="position:relative;width:100px;height:100px">
     <img src="loading.jpg" style='position:absolute;width:100px;height:100px;z-index:0'/>
     <img onLoad="$(this).fadeIn('normal').siblings('img').fadeOut('normal')" src="picture.jpg" style="display:none;position:absolute;width:100px;height:100px;z-index:1"/>
</div>

Wenn Sie dies tun, wenn der Browser Bilder zwischenspeichert, ist es kein Problem, immer img angezeigt zu werden, sondern img unter realem Bild zu laden.

Ich hatte dieses Problem mit dem Internet Explorer, bei dem die e.target.width undefiniert war. Das Ladeereignis würde ausgelöst, aber ich konnte die Abmessungen des Bildes im IE nicht ermitteln (Chrome + FF funktionierte).

Es stellt sich heraus, dass Sie nach e.currentTarget.naturalWidth & e.currentTarget.naturalHeight suchen müssen .

Wieder einmal macht der IE Dinge auf seine eigene (kompliziertere) Weise.

Sie können Ihr Problem mit dem JAIL- Plugin lösen, mit dem Sie auch Bilder verzögert laden (was die Seitenleistung verbessert) und den Rückruf als Parameter übergeben können

$('img').asynchImageLoader({callback : function(){...}});

Der HTML-Code sollte so aussehen

<img name="/global/images/sample1.jpg" src="/global/images/blank.gif" width="width" height="height" />

Wenn Sie eine reine CSS-Lösung wünschen, funktioniert dieser Trick sehr gut - verwenden Sie das Transformationsobjekt. Dies funktioniert auch mit Bildern, wenn sie zwischengespeichert sind oder nicht:

CSS:

.main_container{
    position: relative;
    width: 500px;
    height: 300px;
    background-color: #cccccc;
}

.center_horizontally{
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: green;
  left: 50%;
  top: 0;
  transform: translate(-50%,0);
}

.center_vertically{
  position: absolute;
  top: 50%;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: translate(0,-50%);
}

.center{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: red;
  transform: translate(-50%,-50%);
}

HTML:

<div class="main_container">
  <div class="center_horizontally"></div>
  <div class="center_vertically"></div>
  <div class="center"></div>
  </div>
</div

Codepen Beispiel

Codepen WENIGER Beispiel