Как дождаться окончания загрузки jquery

Question

Используя Jquery, я заменяю div, идентификаторы которых начинаются с 'lib_' с html из другого файла.Все это работает хорошо, но мне нужно подождать, пока все они будут выполнены, прежде чем переходить к коду.Число div с 'lib_' может быть ни одним, или многими.То, что я имею здесь, не ждет, оно запускает 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

$.load следует стандартной цепочке jquery, в которой возвращает объект jquery вызывающего селектора.Например, $("#id").load("url", callback).show(); немедленно покажет #id.

Ожидается метод, который возвращает 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");
      })
 );

Answer 2

$ (окно) .on ('load', function ()

{

// код здесь

});