jQuery получает высоту динамически добавляемых изображений перед добавлением в DOM

#jquery #image #dom #dynamic-content

#jquery #изображение #dom #динамический контент

Вопрос:

Вопрос довольно прост, я намерен позже добавить изображения в 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-------------------------

});  
  

Ответ №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) }  

Комментарии:

1. можете ли вы попробовать простой jsfiddle? потому что я не смог это сделать

2. В чем именно проблема с моим предложением? Я добавил скрипку сейчас, но, пожалуйста, объясните, чего вы не поняли и что вы пробовали.