Получите высоту div для того, чтобы содержимое div полностью загрузилось

Question

У меня есть кнопка, когда я нажимаю исполняемый код js. Как это.

jQuery(".button").on('click', function(){ 
    var page = jQuery(this).attr('data-href');//Get data-href with permalink. 
    jQuery('#ajax_div').load(page, 
    function(){ 
     var newHeight = jQuery('#content_loaded').height()+200; 
     var el = jQuery('#div_containing_ajax_div_and_content_loaded'); 
     el.css({'height': newHeight + 'px'}); 
    }); 

}); 

При первом запуске страницы работает неправильно, но после того, как изображения и т. Д. В кеше работают нормально. Как я могу подождать, пока содержимое будет полностью отображено для выполнения вычисления высоты? Все это без использования функций задержки и без использования плагина. Существует функция типа $ (windows) .ready().

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

Спасибо.

Answer 1

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

jQuery(".button").on('click', function() { 
    var page = jQuery(this).attr('data-href'); //Get data-href with permalink. 
    jQuery('#ajax_div').load(page, function() { 
     var $self = $(this), 
      $contentImages = $(this).find('img'); 
     $contentImages.one('load', function() { 
      $(this).addClass('loaded'); 
      if ($self.find('img.loaded').length === $contentImages.length) { 
       var newHeight = jQuery('#content_loaded').height() + 200; 
       var el = jQuery('#div_containing_ajax_div_and_content_loaded'); 
       el.css({ 
        'height': newHeight + 'px' 
       }); 
      } 
     }).each(function() { 
      if (this.complete) $(this).triggerHandler('load'); 
     }); 
    }); 

}); 

Answer 2

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

первой: непроверенный способ .promise().done();

jQuery('#ajax_div').load(page).promise().done(function(){ 
    // var newHeight ...... 
}); 

2-й: протестирован способ .load обратного вызова функции цикла с помощью образов и проверить, если загружен или нет с помощью Image.error(function() {});

$('img').each(function(){ 
     var Image = $(this); 
     var GetSrc = $(this).attr('src'); 
     Image.error(function() { 
      // newHeight ...... 
     }); 
}); 

DEMO