JQuery DOMに追加する前に動的に追加された画像の高さを取得

Question

質問はかなりまっすぐですが、私の意図は、後で、使用された垂直スペースに応じて3つの異なる列に画像を追加することです。理由は、私は写真の高さを知る必要があります。

次は画像のサイズを取得するには私のスクリプト

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

して、彼らはまだウィンドウにロードする必要があり、私は$（ウィンドウ）のサイズを取る必要があります.LOAD （） 関数。

Answer 2

あなたがロードしているとき、それは非同期次のことを試してみてください。

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

だから、基本的に、あなたのコードで、あなただけ行う必要があるだろう：

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