Ожидание изображения для загрузки после замены DIV

Question

Я делаю вызов AJAX, заменяющий DIV:

$.post(url, function(data) 
{ 
    $('#product_list').first().replaceWith(data.products); 
}); 

Моя проблема заключается в том, что изображения имеют ширину 100% и авто высоты. Это означает, что я должен дождаться загрузки изображений до того, как я запустил изотоп, чтобы исправить макет для кладки.

$('#product_list').isotope({ itemSelector: '.product'}); 

Когда я с заменой ReplaceWith() не будет выстрелить $(window).load() после загрузки изображения, так что я не могу понять, как это сделать.

Я знаю, что это не лучшее решение, так как это вызовет видимый переход к пользователю. Лучшее решение для меня - установить высоту изображения на фиксированную высоту, но я использую адаптивную загрузочную сетку, поэтому я не могу все равно сделать это, так как мне нужно, чтобы изображение соответствовало 100% ширины его контейнера для поддержания дизайна.

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

Answer 1

Вы можете создать объект JS img и использовать событие onload этого изображения, чтобы запустить собственный код javascript, который выполняет некоторую бухгалтерию, и когда все изображения уволят вас, вы запускаете свое событие загрузки.

var $imgs = $('img'), total = $imgs.length, sum = 0; 
$imgs.each(function(){ 
    var img = new Image(); 
    img.src = $(this).attr('src'); 
    img.onload = function() { 
     sum++; 
     if (sum === total) { 
      // all images have loaded, so you can fire your event. 
     } 
    } 
});