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

【问题标题】：AJAX: get html and check if images has finished loadingAJAX：获取 html 并检查图像是否已完成加载
【发布时间】：2012-11-19 20:32:39
【问题描述】：

我正在使用 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});

});

不幸的是，它仅在某些时候有效，因为高度不正确。加载的数据包含一些图像，它们需要一点时间来加载。

有什么方法可以检查是否所有的图片都加载了，所以我可以在加载完成后对高度进行动画处理吗？

【问题讨论】：

slevin 你在 document.ready 上调用它吗

标签： jquery ajax

【解决方案1】：

使用 ImagesLoaded 插件：

https://github.com/desandro/imagesloaded

查看该页面的示例。

jQuery $().load 不起作用，因为当图像已经缓存时它不会触发（请参阅 jquery: image width on domready or load?）

【讨论】：

答案与您所说的相反。
@Asad 对。相应地改变了我的答案。
太棒了！这正是我需要的！ :)
@Samuel 我认为这只适用于直接附加到图像的负载处理程序，而不是窗口。