使用ajax更改元素后,如何检测新内容是否已完全加载?

时间:2015-08-15 02:46:14

标签: jquery ajax

<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
    })
})

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

1 个答案:

答案 0 :(得分:0)

是。如果您运行:

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

您可以在文档加载时在函数内执行任何操作。

修改

如果您在页面加载后运行AJAX,可以将它们放置在以下内容中:

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

然后在你的jQuery中:

{{1}}