Ajax load doesnt wait for img to load when i try to calculate height

Question

Im currentyl working on http://davidpetersson.nu/madartwork/

And i want to load stuff from posts into a div on my startpage. Wich works. Kinda.

I have a specific div and a click event that fetches the content from a post and ajax-loads it into the div. The div is has height 0px until i load, then i measure the content and animate the height to match the content.

It works with text, but when i try to load a post including pictures, sometimes the images has not loaded fully when i measure.

Example. click on "Band 6"

The script i use looks like this:

jQuery(document).ready(function(){

    var $mydiv = jQuery('#single-post-container');
    $mydiv.css('height', $mydiv.height() );
    jQuery.ajaxSetup({cache:false});


    jQuery( window ).resize(function() {
        jQuery("#single-post-container").wrapInner('<div/>');
        var newheight = jQuery('div:first',"#single-post-container").height();
        jQuery("#single-post-container").css( {height: newheight} );
    });

    jQuery(".view-details").click(function(event123){
        event123.preventDefault();
        var post_id = jQuery(this).attr("href");

        jQuery("#single-post-container").load(post_id  + " .post", function(){

            jQuery('#single-post-container').wrapInner('<div/>');
            var newheight = jQuery('div:first','#single-post-container').height();

            //Does sometimes not include the height of the images, since they havnt completely loaded

            jQuery('#single-post-container').animate( {height: newheight} );

            jQuery('html, body').animate({
                scrollTop: jQuery('body').offset().top
            }, 800);

        });
        return false;
    });
});

I have tried to inlcude .imagesLoaded from this post jQuery Ajax wait until all images are loaded

But i havent managed to get it to work.

(jQuery instead of $ is used because wordpress)

This is one of my first ajax-script-tinkerings, so stuff might be really wrong, so be gentle :)

Answer 1

Two things:

1. You can make jQuery accessablie by $ inside the ready state. Just pass the $ as first parameter of the inner function. Now you can use $ at the inside as known. It is even better when you want to reuse the code somewehere.

2. You can track the loading of img inside your container. Just wrap your code with a loading callback, and when everything is loaded, do your work.

---

jQuery(function($) {
    var $mydiv = $('#single-post-container');
    $mydiv.css('height', $mydiv.height());
    $.ajaxSetup({
        cache: false
    });

    $(window).resize(function() {
        $("#single-post-container").wrapInner('<div/>');
        var newheight = $('div:first', "#single-post-container").height();
        $("#single-post-container").css({
            height: newheight
        });
    });

    $(".view-details").click(function(event123) {
        event123.preventDefault();
        var post_id = $(this).attr("href");

        $("#single-post-container").load(post_id + " .post", function() {
            $('#single-post-container').wrapInner('<div/>');

            var callback = function() {
                var newheight = $('div:first', '#single-post-container').height();

                $('#single-post-container').animate({
                    height: newheight
                });

                $('html, body').animate({
                    scrollTop: $('body').offset().top
                }, 800);
            }

            // wait for all images to be loaded
            var count = $('#single-post-container').find('img').load(function() {
                if (--count === 0) {
                    callback();
                }
            }).length;

            // or if no image available
            if( count === 0 ) {
                callback();
            }
        });

        return false;
    });
});