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

Question

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

3

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

Slevin，你是在document.ready上调用它吗？ - rahul

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Samuel · Accepted Answer

使用ImagesLoaded插件：

https://github.com/desandro/imagesloaded

请参考该页面的示例。

jQuery的$().load无法工作，因为当图像已经被缓存时，它不会触发（请参见jquery: image width on domready or load?）。