Выполнять jQuery после другого файла JS Динамически загружает содержимое

Я работаю над изменением некоторого контента, который динамически загружается через другой скрипт (назовем его скриптом №1) на мой сайт. Сценарий №1 загружает некоторую разметку и содержимое, и я использовал функцию setTimeout() для вызова моего сценария (сценарий №2) с задержкой в ​​несколько секунд, чтобы убедиться, что сценарий №1 выполнен и содержимое присутствует в DOM.

Моя проблема в том, что Script # 1 имеет разное время загрузки в зависимости от нагрузки на сервер и может быть медленным или быстрым в зависимости от этих факторов, и прямо сейчас, играя безопасно с setTimeout(), у меня часто остается секунда или две, где мои сценарии все еще ждут запуска, а сценарий №1 уже загрузил содержимое.

Как я могу выполнить свой сценарий, как только сценарий № 1 успешно загрузит его динамическое содержимое?

Я нашел это сообщение, которое, похоже, касается та же проблема, но использование функции setInterval, как изложил @Matt Ball, по какой-то причине вообще не работает. Я использую приведенный ниже код, где «div.enrollment» предназначен для поиска в DOM, который динамически загружается и выполняется.

jQuery(window).load(function ($)
  {
      var i = setInterval(function ()
      {
          if ($('div.enrollment').length)
          {
              clearInterval(i);
              // safe to execute your code here
              console.log("It's Loaded");
          }
      }, 100);
  });

Любая помощь в руководстве по этому вопросу будет принята с благодарностью! Спасибо за ваше время.


javascript dynamic jquery
person Andrew-ThinkUp    schedule 25.11.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Кажется, что healcode.js много чего делает. К тегу <healcode-widget> добавлено много разметки.

Я бы попытался добавить еще один тег с идентификатором внутри и проверить его существование:

<healcode-widget ....><div id="healCodeLoading"></div></healcode-widget>

Проверка в интервале на наличие healCodeLoading внутри <healcode-widget>: (предполагая jQuery)

var healCodeLoadingInterval = setInterval(function(){ 
    var healCodeLoading = jQuery('healcode-widget #healCodeLoading');

    if (healCodeLoading.length == 0) {
        clearInterval(healCodeLoadingInterval);

        // Everything should be loaded now, so you can do something here
    }
}, 100);

healcode.js должен заменить все внутри <healcode-widget></healcode-widget> во время инициализации. Итак, если вашего <div>-элемента больше нет внутри, виджет загрузился и инициализировался.

Надеюсь, это поможет.

person Guido Kitzing    schedule 30.11.2015
comment
это отличный прием. Мне было жаль видеть, что это не сработало, как мы надеялись. Я думаю, вы должны увидеть этот сайт разработчиков, чтобы проверить разметку, если ты такой склонный. Похоже, что healcode.js не очищает div#healCodeLoading, а просто смещает его и помещает за пределы ‹healcode-widget›. Так что проверка на существование в данном случае не увенчалась успехом. - person Andrew-ThinkUp; 01.12.2015
comment
Хорошо. Но тогда вы можете изменить код. Я обновил свой ответ. Основное отличие в том, что теперь я проверяю наличие #healCodeLoading ВНУТРИ <healcode-widget>. Если его нет внутри, мы, вероятно, можем предположить, что виджет загрузился. Я использовал jQuery для более легкого доступа к DOM. - person Guido Kitzing; 01.12.2015
comment
Спасибо за ваши усилия. Это тоже не работает. По-видимому, скрипт загружается частично (отображает загрузочное изображение, после чего блок #healCodeLoading получает загрузку, а затем требуется еще несколько секунд, чтобы загрузить фактическую разметку. Я вижу, что другой сайт делает что-то подобное, и они используют if(jQuery('.hc_loading_image').length ) для того, чтобы посмотрите, отображается ли загрузочное изображение. Я мог бы увидеть дальнейшее использование этого.. Я думаю, мне нужно было бы иметь 2 функции setInterval, одну, чтобы смотреть и видеть, когда отображается загрузочное изображение, и одно, чтобы видеть, когда оно идет (разметка загружен). - person Andrew-ThinkUp; 03.12.2015
comment
Но ваш метод сработал! @GuidoK Просто немного изменился. Я знаю, что выходные данные загружают набор ‹div class=enrollment›‹/div, которые являются основной разметкой, поэтому я изменил переменную healCodeLoading на jQuery('healcode-widget .enrollment'), а оператор if на if (healCodeLoading.length !== 0), чтобы определить, когда этот div регистрации существует и имеет содержимое, и он работает. как магия. Благодарю вас! - person Andrew-ThinkUp; 05.12.2015

arrow_upward
1
arrow_downward

Если вы просто хотите загрузить некоторую разметку и контент, а затем запустить какой-либо скрипт, вы можете использовать jQuery. Вы должны использовать что-то вроде следующего в сценарии № 1 для запуска функции в сценарии № 2.

$.get( "ajax/test.html", function( data ) {
    // Now you can do something with your data and run other script.
    console.log("It's Loaded");
});

Функция вызывается после загрузки ajax/test.html.

надеюсь, это поможет

person Guido Kitzing    schedule 25.11.2015
comment
Спасибо за ваш ответ. У меня проблема в том, что я не контролирую сценарий № 1. По крайней мере, я так считаю. Я вставляю следующий код <script src="https://widgets.healcode.com/javascripts/healcode.js" type="text/javascript"></script> <healcode-widget data-type="enrollments" data-widget-partner="mb" data-widget-id="301787442aa" data-widget-version="0.1"></healcode-widget>, и он выполняется, вызывая разметку. Как только это произойдет, мне нужно выполнить мой сценарий (сценарий № 2). @Гвидо - person Andrew-ThinkUp; 30.11.2015
comment
Я просмотрел этот код, но в healcode.js происходит много всего. Я бы, наверное, попытался посмотреть, что происходит внутри тега ‹headcode-widget›. Смотрите мой другой ответ для этого. - person Guido Kitzing; 30.11.2015