检查.ajax请求后加载的所有图像？

我需要知道何时从附加的html源加载所有图像以执行另一个function。 我怎么检查？

$(document).ready(function () { $('a.load-more').click(function (e) { e.preventDefault(); $.ajax({ type: "GET", url: $(this).attr('href'), data: { page: last_id }, dataType: "script", success: function () { $('.load-more').show(); } }); }); }); 

我正在追加这样的html源代码：

 $('.container').append(' @items)) %>'); 

它成功地提供了html源代码，但是我无法找到来自该源的所有图像的加载时间

每次点击链接时都会更新.container Load more

并且.container源代码如下：

Answer 1

在支持事件捕获阶段的所有浏览器上，您可以捕获所有新添加图像的onload事件：

 document.addEventListener( 'load', function(event){ var elm = event.target; if( elm.nodeName.toLowerCase() === 'img' && $(elm).closest('.container').length && !$(elm).hasClass('loaded')){ // or any other filtering condition console.log('image loaded'); $(elm).addClass('loaded'); if($('.container img.loaded').length === $('.container img').length) { // do some stuff console.log("All images loaded!") } } }, true // Capture event ); 

要支持例如不处理捕获阶段的IE8，您应该将onload事件设置为在DOM中添加后的特定映像，并在script onload事件中设置它。