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

在异步加载时尝试以下操作：

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