在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 ......
});

第二：在.load回调函数中循环测试图像的方式，并使用Image.error(function() {});检查是否加载了图像Image.error(function() {});

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

DEMO