Get div height befor the div content is fully loaded

Question

I've got a button, that when I click executes a js code. Like this.

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'});
    });

});

The first time it loads the page works wrong, but after have the images, etc, in cache it works ok. How can I wait that the content is fully rendered to execute the height calc? All of this without use delay functions and with out use a plugin. There is a function like $(windows).ready().

I'm using wordpress, and with jquery load() it gets the height before the image is fully render and the height is less than the real height of the content in the div.

Thanks.

are you using `$(document).load()`? `.ready()` executes when the HTML-Document is loaded and DOM is ready and `.load()` executes when the complete page is fully loaded, including all frames, objects and images — indubitablee, Nov 23 '15 at 14:54
@indubitablee But OP is using ajax to load content inside div — A. Wolff, Nov 23 '15 at 14:55
We need to understand what your div does a little better. Does it have a set height in CSS? If not then, does the content inside needs to be loaded for the div to have a height like an image? — AGE, Nov 23 '15 at 14:55
It might be worthwhile to set an event to listen for when the height attribute changed via JS/jQuery, I found a Stack Overflow question which might help (see below) — AGE, Nov 23 '15 at 14:58
Possible duplicate of [Detecting when a div's height changes using jQuery](http://stackoverflow.com/questions/172821/detecting-when-a-divs-height-changes-using-jquery) — AGE, Nov 23 '15 at 14:58
A fiddle requires very little effort and makes everything easier. — Skatch, Nov 23 '15 at 14:59

score 0 · Answer 1 · answered Nov 23 '15 at 15:10

You could check that all images added are loaded using following snippet:

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');
        });
    });

});

score 0 · Answer 2 · answered Nov 23 '15 at 15:24

maybe I should say that you have 2 ways to do that .. one I'm not tested it and another I tested it

1st: untested way .promise().done();

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

2nd: tested way in .load callback function loop through images and check if loaded or not using Image.error(function() {});

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

DEMO

Sorry but this doesn't work. May be i'm doing something wrong. — Pablo Levin, Nov 23 '15 at 22:32

Get div height befor the div content is fully loaded

2 Answers2