如何等待所有 jquery 加载完成

Question

使用 Jquery 我正在用另一个文件中的 html 替换 ID 以 'lib_' 开头的 div。一切正常，但我需要等到它们全部完成后再继续编写代码。 'lib_' 的 div 数量可能是 none，或者很多。我这里没有等待，它会在 .load 完成之前启动 LoadStepPart5。

let deferreds = [];

    $('[id^="lib_"]').each(function(){
        let divID = $(this).attr('id');
        let libID = divID.replace('lib_','');

        deferreds.push( $( '#' + divID ).load( "lib/library.html #" + libID, function(){
            console.log("this appears later, code didn't wait");
        }));
    });

    $.when.apply(null, deferreds).done(function() {
        console.log("immediately displayed");
        LoadStepPart5(n,xml);
    });

Answer 1

$(window).on('load', 函数()

{

// 代码在这里

});

Answer 2

$.load 遵循标准 jquery 链接，因为它 returns 调用选择器的 jquery 对象。例如 $("#id").load("url", callback).show(); 将立即显示 #id。

您期望的方法 returns a promise: $.ajax

您可以在浏览器控制台快速确认：

$("#a").load("url")
n.fn.init {context: document, selector: "#a"}

$.ajax({ url: "url" })
{readyState: 1, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}

将您的代码更新为：

deferreds.push(
    $.ajax(
      { 
        url: "lib/library.html"
      })
      .done(function(html) {
        $("#"+divID).html($("<div>").html(html).find("#"+libID).html());
         console.log("this as html is loaded");
      })
 );

如何等待所有 jquery 加载完成

How to wait for all jquery loads to finish

jquery

load

jquery-deferred