AJAX：获取HTML并检查图像是否已完成加载

Question

我正在使用AJAX在特定容器中加载HTML和图像。 我需要动画封闭容器的高度，所以我尝试：

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

}); 

不幸的是，它的工作原理只是有时，引起高度是不正确的。加载的数据包含一些图像，需要一些时间加载。

是否有任何方法检查所有图像是否加载，所以我可以在完成加载后动画高度？

Answer 1

使用ImagesLoaded插件：

https://github.com/desandro/imagesloaded

请参阅网页的例子。

jQuery的$().load将无法​​正常工作，因为它不火的时候，图像已缓存（见jquery: image width on domready or load?）