Bildlast erkennen

Ist es möglich zu erkennen, wann ein Bild mit jQuery geladen wurde?

Du kannst den … benutzen .load() Event-Handler, etwa so:

$("#myImg").load(function() {
  alert('I loaded!');
}).attr('src', 'myImage.jpg');

Unbedingt anhängen Vor Festlegen der Quelle, oder das Ereignis wurde möglicherweise ausgelöst, bevor Sie einen Handler angehängt haben, um darauf zu lauschen (z. B. Laden aus dem Cache).

Wenn das so ist nicht machbar (Einstellung der src nach dem Binden), überprüfen Sie, ob es geladen ist, und feuern Sie es selbst ab, wie folgt:

$("#myImg").load(function() {
  alert('I loaded!');
}).each(function() {
  if(this.complete) $(this).load();
});

Es ist genauso einfach, einfaches Javascript zu verwenden:

  // Create new image
var img = new Image();

  // Create var for image source
var imageSrc = "http://example.com/blah.jpg";

  // define what happens once the image is loaded.
img.onload = function() {
    // Stuff to do after image load ( jQuery and all that )
    // Within here you can make use of src=imageSrc, 
    // knowing that it's been loaded.
};

  // Attach the source last. 
  // The onload function will now trigger once it's loaded.
img.src = imageSrc;

Ich habe auch lange darüber recherchiert und festgestellt, dass dieses Plugin dabei wunderbar hilft: https://github.com/desandro/imagesloaded

Es scheint eine Menge Code zu sein, aber … ich habe keinen anderen Weg gefunden, um zu überprüfen, wann ein Bild geladen wurde.

Ganz einfach mit jquery:

$('img').load(function(){
   //do something
});

Wenn es versucht wurde mit:

$('tag')html().promise().done(function(){ 
   //do something
}) ;

aber das wird nicht prüfen, ob das Bild geladen ist. Das Feuer ist erledigt, wenn der Code geladen ist. Andernfalls können Sie überprüfen, ob der Code ausgeführt wurde, dann die Funktion img load auslösen und überprüfen, ob das Bild wirklich geladen ist. Also machen wir eine Kombination aus beidem:

$('tag')html('<img src="'+pic+'" />').promise().done(function(){ 
   $('img').load(function(){
     //do something like show fadein etc...
   });
}) ;

Ich denke, das kann dir ein bisschen helfen:

    $('img').error(function(){
        $(this).attr( src : 'no_img.png');
 })

Also, wenn es geladen ist – wird das Originalbild angezeigt. In anderen – wird ein Bild angezeigt, das eine Tatsache mit einem abgestürzten Bild oder einem 404-HTTP-Header enthält.