Höhe und Breite des angehängten Bildes suchen?

Question

ich habe:

for(var i=1;i<10;i++){ 
    $('#vid_c_'+i).append('<div class="move_2" id="vd'+i+'"></div>'); 
    $('#vd'+i).append('<img class="class" id="id_'+i+'" src="'+_m[i-1]+'">'); 
    $("#id_"+i).load(function() { 
     var mv_pstimg = document.getElementById('id_'+i); 
     var width = mv_pstimg.clientWidth; 
     var height = mv_pstimg.clientHeight; 
     console.log(height +" "+width); 
    }); 
} 

Konsolausgaben: Uncaught TypeError: Cannot read property 'clientWidth' of null

FYI: Das Bild wird in meinem Browser fein geladen

Ich habe auch versucht

$("img").one("load", function() { 
    var mv_pstimg = document.getElementById('id_'+i); 
    var width = mv_pstimg.clientWidth; 
    var height = mv_pstimg.clientHeight; 
    console.log(height +" "+width); 
}).each(function() { 
    if(this.complete) $(this).load(); 
}); 

Gleiches Ergebnis

Answer 1

Sie müssenverwenden. Das Problem ist folgendes:

jQueryladen Funktion ist asyncronous.

Die callback Funktion .load geleitet wird nur dann ausgeführt, wenn das Bild geladen wird.

Sie Jede der Funktion Rückrufe für load Verfahren sind schließt über den loopi Wert, nicht den Wert der i Variable, wenn der Rückruf erstellt Erstellung wurde.

for(var i=1;i<10;i++){ 
    $('#vid_c_'+i).append('<div class="move_2" id="vd'+i+'"></div>'); 
    $('#vd'+i).append('<img class="class" id="id_'+i+'" src="'+_m[i-1]+'">'); 

    (function(index){ 
     $("#id_"+index).load(function() { 
      var mv_pstimg = document.getElementById('id_'+index); 
      var width = mv_pstimg.clientWidth; 
      var height = mv_pstimg.clientHeight; 
      console.log(height +" "+width); 
     }); 
    }(i)); 
}