Get div height befor the div content is fully loaded

2 Views

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().

Read More

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.

Post Views: 2

Related posts

2 comments

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

});

  2. 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

Comments are closed.