如何通過AJAX調用知道何時將所有內容加載到頁面上？

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

});