Wie kann sichergestellt werden, dass Bilder in ein JQuery-Plugin geladen werden?

Question

Beim Erstellen eines JQuery-Plug-ins, für das Bildabmessungen erforderlich waren, habe ich festgestellt, dass Webkit-Browser wie Chrome häufig die Größe 0 für Bilder zurückgeben, da sie parallel geladen werden.

Meine quick and dirty Lösung war, den Code zu wickeln, dass mein Plugin in einem $(window).load() Ereignis ruft:

$(document).ready(function() { 
    $(window).load(function() { 
     $('.magnifier').magnifier(); 
    }); 
}); 

Wie würde ich mich über sich dies in der Plug-Implementierung? Was ist der sauberste Weg zu erkennen, dass Bilder geladen sind, damit ich ihre Abmessungen messen kann?

Answer 1

Bilder haben eine Last() Ereignis, so dass Sie so etwas wie tun könnte:

$(document).ready(function() { 
    $('.magnifier').magnifier(); 
}); 

$.fn.magnifier = function() { 
    return this.each(function() { 
     $(this).find('img').load(function() { 
      // do something to image when it is loaded 
     }); 
    }); 
} 

Sie auch einfach den Code umschlingen window.load könnte innerhalb des Plugin selbst:

$.fn.magnifier = function() { 
    var that = this; 
    $(window).load(function() { 
     that.each(function() { 
      $(this).find('img').each(function() { 
       // image would be loaded at this point 
      }); 
     }); 
    }); 
    return this; 
} 

Answer 2

I Ich bin mir nicht sicher, ob ich das komplett verstehe, aber das wird ausgelöst, wenn alle Bilder geladen sind.

$("img").load(function() { 

});