JQuery load() wird ausgelöst, bevor das Bild geladen wird

Question

Ich möchte src Attribut meines Bildes ändern und dann die Breite des neuen Bildes lesen. Leider scheint die JQuery load() -Funktion zu starten, bevor das Bild geladen und die Breite eingestellt wird. Hast du eine Idee, wie du es reparieren kannst?

function buildLoad(rc){ 
 
\t alert(rc.width()); 
 
} 
 

 
var rc = $('img.myimg'); 
 
rc.attr({'src':'https://imagizer.imageshack.us/v2/379x674q90/661/Nt07gm.jpg?'+Math.random()}); 
 
rc.load(buildLoad(rc));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img class="myimg" src="">

Answer 1

Probieren Sie das Onload-Ereignis

$(document).ready(function(){ 
 
    
 
    var rc = $('img.myimg'); 
 
    rc.load(function(e){ 
 

 
     console.log("Height:" + e.currentTarget.height, "Width:" + e.currentTarget.width) 
 

 
    }); 
 
    
 
    rc.attr({'src':'https://imagizer.imageshack.us/v2/379x674q90/661/Nt07gm.jpg?'+Math.random()}); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img class="myimg" src="">

Answer 2

Verwendung JQuery eine Funktion.

http://api.jquery.com/one/

Versuchen Sie, den folgenden Code ein.

$ ("img.myimg") ein ("load", function() {// Breite des Bildes Get }) attr ("src", "Neuer Pfad")..;

Answer 3

Speziell in Ihrem Code war das Problem, dass Sie die buildLoad(rc) unabhängig von der load Ereignis aufgerufen. Was Sie tun musste, ist eine Wrapper-Funktion aufrufen, die ausgeführt wird, sobald der load Geographie:

rc.load(function() { buildLoad(rc) }) 

function buildLoad(rc){ 
 
\t alert(rc.width()); 
 
} 
 

 
var rc = $('img.myimg'); 
 
rc.attr({'src':'https://imagizer.imageshack.us/v2/379x674q90/661/Nt07gm.jpg?'+Math.random()}); 
 
rc.load(function() { buildLoad(rc) })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img class="myimg" src="">

Egal - es gibt in Bezug auf mehrere bekannte Probleme der load Ereignis auf Bilder unter aktuellen Browsern, die Sie mehr über here lesen können.