Выполнение JQuery Bind Synchronously

Question

Я в настоящее время получаю размер некоторых изображений в операторе each().

Я привязываю функцию к этому событию загрузки. Хотя, мне нужно, чтобы получить высоту изображения, прежде чем продолжить выполнение кода.

$(window).load(function() { 

     $("element").each(function() { 
      /* 
      . 
      . 
      . 
      . 
      */ 
      var containerHeight = $(this).height(); 
      var imgHeight = 0; 

      //get the size of the full image. 
      var imgLoad = $("<img />"); 
      imgLoad.attr("src", imgSrc); 
      imgLoad.bind("load", function() { imgHeight = this.height; }); 

      heightDiff = (imgHeight - containerHeight); 

      //some methods are called... 
      //imgHeight is still set to 0 
     }); 
}); 

Я рассматривал .trigger("custom-event")

, а затем проверить, если она была вызвана с Jquerys .when() методом

Но есть проще (если не лучше) способ сделать это?

С уважением,

Answer 1

Я думаю, что ваш делать это почти правильно, window.load срабатывает, когда все элементы (в том числе изображений) загружаются. чтобы получить высоту каждого использования что-то вроде изображения:

$(window).load(function(){ 

    // triggered when images are loaded 

    $('img').each(function() { 

      // get the height of each image 
      var height = $(this).height(); 

     }); 
}); 

Answer 2

В очень классический "how can I return values from an asynchronous function" проблему.

Вы не можете, период. Использовать обратные вызовы.

$("element").each(function() { 
    var containerHeight = $(this).height(), 
     imgSrc = "something"; 

    $("<img />", { src: imgSrc }) 
    .appendTo("#whatever") 
    .on("load", function() { 
     var $img = $(this), 
      heightDiff = ($img.height() - containerHeight); 

     //some methods are called... 
    }); 
}); 

Answer 3

Вы не можете договориться загрузка изображения будет сделано синхронно, так что вы должны сделать всю работу в функции нагрузки обратного вызова событие:

var imgLoad = new Image(); 
imgLoad.onload = function() { 
    var imgHeight = this.height, 
    heightDiff = (imgHeight - containerHeight); 
    // do stuff here 
}; 
imgLoad.src = imgSrc; // load image