JQuery Holen Sie sich die Höhe der dynamisch hinzugefügten Bilder vor dem Anhängen in das DOM

Question

Die Frage ist ziemlich direkt, meine Absicht ist es, später die Bilder in 3 verschiedenen Spalten abhängig von der vertikalen Raum durch die Bilder anhängen, dass die Grund muss ich die Höhe der Bilder kennen.

Das folgende ist mein Skript

$(document).ready(function() { 

//----------------------------------image feed----------------------------- 
//random generator 
    //array length 
     arr = []; arr.length = 94; //Number of images 
     $.each(arr, function(i,v){v = i+1; arr[i] = v;}); 
     //random 
     var i= arr.length, j, temp; 
     while(--i > 0){ 
      j = Math.floor(Math.random() * (i + 1)); 
      temp = arr[j]; arr[j] = arr[i]; arr[i]=temp; 
      }; 
//end of image feed and random 

//load all thumbnails 

    window.imagesThumb = []; 
    $.each(arr, function(i,v){ 
     myImagethumb = $(new Image()).attr({ 
      "src":"img/pictures/thumbnails/img"+v+".jpg", 
      "id":v, 
      "class":"image" 
     }); 
     imagesThumb[i] = myImagethumb; 

    }); 


//--------------------------------END OF IMAGE FEED------------------------- 

}); 

Answer 1

Um die Größe der Bilder zu bekommen, haben sie bereits so in das Fenster geladen werden, würde ich die Größe der $ (Fenster) .load nehmen() Funktion.

Answer 2

den folgenden Versuchen Sie, wenn Sie laden es Asynchron:

var i = new Image; 
i.src= 'https://YOUR_IMAGESRC'; 
i.onload = function(){ console.log(i.width, i.height) } 

Also im Grunde, mit Ihrem Code, dann würden Sie nur tun müssen:

myImagethumb.onload = function(){/**...*/} 

var i = new Image; 
 
i.src= 'https://media.giphy.com/media/l0HlSF89is7bCAjte/giphy.gif'; 
 
i.onload = function(){ alert(i.width); alert(i.height) }