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?）