使用ajax更改元素后，如何检测新内容是否已满载？

Question

<div class="content">Some original Text<img src="someImage"></div>

$.ajax('someAjaxUrl', function(data){
    $('content').html(data);
})

我正在使用与上面类似的一些代码从服务器获取内容并将其显示在内容区域中。实际内容包含大量的图片和文字，所以在ajax请求完成并更改了HTML之后，仍然需要一些时间来渲染所有的图片。当所有新内容（包括图像）都已完全加载时，我正在尝试捕获该事件：

$.ajax('someAjaxUrl', function(data){
    $('content').html(data);
    $('content')[0].addEventListener('load',function(){
      // Do something
    })
})

但这似乎不起作用。这可能吗？

Answer 1

是的。如果你运行：

$(document).ready(function(){
// AJAX, etc in here ...
});

当文档加载完毕后，您可以在函数内执行任何操作。

编辑：

如果您在页面加载后运行 AJAX，您可以将它们放入如下内容：

<div id="loaded" style="display: none">
<img src""/>
<p>Whatever you want in here.</p>
<img src""/>
<img src""/>
<img src""/>
</div>

然后在你的 jQuery 中：

$('#loaded img').load(function(){
$('#loaded').show()
});