jquery - 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? )