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