CODEWITHSUNDEEP
jqueryajax
Slevin
Slevin

Reputation: 4222

AJAX: get html and check if images has finished loading

I'm using AJAX to load html and images in a specific container. I need to animate the height of the enclosing container, so i tried:

// load content
var id = $(this).data('id');
$.get('content/'+id+'/html/content.html', function(data) {

    // insert html
    $('#overlay-inner').html(data);

    // show overlay
    $('#overlay').fadeIn();

    // add new height to wrapper
    var height = $('#overlay').height() + 200;
    console.log(height);
    $('#wrapper').animate({'height':height});

});

Unfortunately, it works only sometimes, cause the height isn't correct. The loaded data contains a few images and they need a little time to load.

Is there any method to check if all images are loaded, so i can animate the height after the complete loading?

Upvotes: 3

Views: 738

Answers (1)

Samuel
Samuel

Reputation: 1667

Use the ImagesLoaded plugin:

https://github.com/desandro/imagesloaded

See that page for an example.

The jQuery $().load won't work, as it doesn't fire when the images are already cached (see jquery: image width on domready or load?)

Upvotes: 1

Related Questions