Javascript 如何知道何时从AJAX调用将所有内容加载到页面上？

希望有人能帮我

在我的应用程序中，我进行了一些相当大的AJAX调用，让HTML进入我的页面。此HTML最多可以包含7或8个图像

我目前使用的AJAX如下所示：

$.ajax({
    type: 'GET',
    url: 'ajax-content/page.html'
}).done(function(data) {

    $('#case_study').html('<div class="loading"></div>');

    $('#case_study').append(data);

    // EVERYTHING AFTER THIS POINT SHOULD ONLY RUN ONCE ALL CONTENT IS
    // SUCCESSFULLY LOADED ON THE PAGE

    $('#case_study').css("max-height", "3000px");

    $('.loading').remove();

}).fail(function(data) {

    console.log("FAIL");
    console.log(data);

});

$.ajax({
键入：“GET”，
url:'ajax content/page.html'
}).完成（功能（数据）{
$（“#案例研究”）.html（“”）；
$（'案例研究'）。追加（数据）；
//这一点之后的所有内容只应在所有内容都被删除后运行
//已成功加载到页面上
$（'案例研究'）.css（“最大高度”，“3000px”）；
$（'.loading'）.remove（）；
}).失败（功能（数据）{
控制台日志（“失败”）；
控制台日志（数据）；
});

现在一切正常，但是，

.done

中的代码在服务器用我的HTML响应后立即运行，这很好，但并不完全是我想要的

我需要知道的是，在我运行了

$（“#案例研究”）之后。追加（数据）

用户何时可以看到所有内容，何时所有图像完成加载等

如果有人能帮我解决这个问题，那就太好了

---

干杯。

如果您只是在等待图像，您可以在图像中添加一个eventListener，然后等待所有已完成的加载：

var index = 0;
$('img').on('load', function() {
    index++;
    if (index == $('img').length - 1) {
        // show your content
    }
});

---

您是否尝试过jQuery的加载功能

$.ajax({
    type: 'GET',
    url: 'ajax-content/page.html'
}).done(function(data) {

    $('#case_study').html('<div class="loading"></div>');

    $('#case_study').append(data).load(function() {
      $('#case_study').css("max-height", "3000px");

      $('.loading').remove();
    });

}).fail(function(data) {

    console.log("FAIL");
    console.log(data);

});

$.ajax({
键入：“GET”，
url:'ajax content/page.html'
}).完成（功能（数据）{
$（“#案例研究”）.html（“”）；
$（“#案例研究”）.append（数据）.load（函数（）{
$（'案例研究'）.css（“最大高度”，“3000px”）；
$（'.loading'）.remove（）；
});
}).失败（功能（数据）{
控制台日志（“失败”）；
控制台日志（数据）；
});

为图像添加一个eventlistener。@putvande您能提供一个示例吗？我不确定我是否完全理解。也不确定为什么这件事值得投否决票。不管谁投了反对票，请告诉我为什么，这样我就可以解决这个问题了？啊，我明白了，谢谢你，它工作得很好！我的理解是，图像是加载所需时间最长的，这是最好的等待，还是有办法知道何时加载了包含元素内的所有内容？我没有尝试过这个方法。

.load

功能是否仅在加载

#案例研究

中的所有内容时运行，包括所有图像和所有其他内容？——在测试之后，我认为这不起作用，在下面的代码中，我的

console.log（）

永远不会触发：

$（“#案例研究”）.append（data.load（函数（）{console.log（“所有加载的内容”）；}）加载事件在元素和所有子元素完全加载后发送到元素。另请参见[link]，但它似乎已被弃用，因此更好地使用。在（'load'，function…）上，我看到了，谢谢，不幸的是代码仍然不起作用。我尝试了一些不同的选项，但无法触发我的
console.log（）
。