Question

希望有人可以帮助我。

在我的应用程序中，我正在进行一些非常大的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);

});

现在一切正常，但是，.done中的代码只要服务器用我的HTML回复就会运行，这很好，但不是我想要的。

我需要知道的是，在我运行$('#case_study').append(data)之后，当所有内容实际上对用户可见时，所有图像都已完成加载等。

如果有人可以帮我解决如何做到这一点，那就太棒了。

干杯。

Answer 1

如果您只是在等待图像，可以在图像中添加一个eventListener并等待它们完成所有加载：

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

Answer 2

您是否尝试过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调用页面加载所有内容的时间？

2 个答案: