Javascript ausführende Funktion nach Vollbild laden

Question

Ich habe die folgende Zeile von javascritp $("#hero_image img").attr('src', src);, um ein Bild zu ändern. Die folgenden Zeilen tun dann, was auch immer sie tun, basierend auf der neuen Breite der Bilder, die ich durch $("#hero_image img").width(); anruft.

Wie stelle ich jedoch sicher, dass dieses Bild vollständig geladen ist, bevor die Breite erhalten wird, sonst werde ich mit der alten Breite zurückgegeben? Das Festlegen eines Zeitlimits ist nicht zuverlässig genug.

Answer 1

Sie können die Breite in den .load() Ereignishandler erhalten, die ausgelöst wird, nachdem es vollständig geladen ist, wie folgt aus:

$("#hero_image img").load(function() { 
    alert($(this).width()); 
}).attr('src', src); 

Wenn Sie diese und wieder mit dem Bild tun, entweder binden die .load() Handler einmal , von Ihnen jedes Mal .one() unterschiedliches Verhalten benötigen verwenden, damit es nicht hält ein onload Ereignishandler hinzu:

$("#hero_image img").one('load', function() { 
    alert($(this).width()); 
}).attr('src', src); 

Answer 2

$(function(){ // document ready 
    $('#hero_image img').bind('load', function(){ // image ready 
     // do stuff here 
    }); 
});