所有图像加载完成后调用函数

Question

$.ajax('html url')
    .done(function(response) {
            var resultHtml = $(response).find("#content").children();
                $("#content").html(resultHtml);                    
                $(document).height();            
    })

在这里，我需要计算响应的文档高度。 但是此响应包含多个图像，需要花费一些时间来加载。 因此，文档高度小于要求的高度。

我尝试对图像使用jQuery加载功能-这样

$('img').load(function(){
   $(document).height();
});

但是在这种情况下，它也不起作用。 但是，对于图像使用javascript complete方法，它将返回正确的高度（对于单个图像）。

 document.getElementById("#image1").complete{
   $(document).height();
 }

但是我的响应包含多个图像，因此getElementById无法正常工作。 我想使用jquery实现此目的。

Answer 1

尝试这个

var images= document.images,
length = images.length,
cnt = 0;

[].forEach.call( imgs, function( images) {
    images.addEventListener( 'load', incrementCounter, false );
} );

function incrementCounter() {
    cnt++;
    if ( cnt=== length ) {
        console.log( 'All image load' );
        $(document).height(); //your code
    }
}

Answer 2

在js上使用它：

$("img").imagesLoaded(function(){
//do something here, it will run after image loaded, but please attention about browser cache
});

它使用imagesLoaded.js在https://imagesloaded.desandro.com上签出