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