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