JQuery Obtenez la hauteur des images ajoutées dynamiquement avant de vous inscrire dans le DOM

Question

La question est assez simple, mon intention est, plus tard, d'ajouter les images dans 3 colonnes différentes en fonction de l'espace vertical utilisé par les images qui est le raison pour laquelle j'ai besoin de connaître la hauteur des images.

Ce qui suit est mon script

$(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

Pour obtenir la taille des images, ils doivent être chargés dans la fenêtre déjà, je dois prendre la taille de la $ (fenêtre) .load() fonction.

Answer 2

Essayez ce qui suit lorsque vous le charger Async:

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

Donc, fondamentalement, avec votre code, vous auriez seulement avez à faire:

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) }