在其他JS文件之后执行jQuery动态加载内容

I'm working to modify some content which is dynamically loaded via another script(let's call is script #1) onto my site. Script #1 loads some markup and content and I've been using the setTimeout() function to call my script (Script #2) using a delay of a few seconds, in order to wait to be sure that Script #1 has executed and the content is present in the DOM.

我正在努力修改一些通过另一个脚本动态加载的内容(让我们调用脚本#1)到我的网站上。脚本#1加载了一些标记和内容,我一直在使用setTimeout()函数调用我的脚本(脚本#2),延迟几秒钟,以便等待确保脚本#1已执行并且内容存在于DOM中。

My issue is that Script#1 has different loading times, based on the server load and can be slow or fast depending on these factors, and right now, playing it safe with setTimeout() I'm often left with a second or two where my scripts are still waiting to be fired and Script #1 has already loaded the content.

我的问题是脚本#1有不同的加载时间,基于服务器负载,可能是缓慢或快速取决于这些因素,现在,使用setTimeout()安全地播放它我常常留下一两秒或两个我的脚本仍在等待被解雇,脚本#1已经加载了内容。

How can I execute my script as soon as Script#1 successfully loads it's dynamic content?

脚本#1成功加载动态内容后,如何执行脚本?

I've found this post which does seem to address the same issue but using the setInterval function as @Matt Ball has laid out there doesn't work at all for some reason. I'm using the code below where 'div.enrollment' is meant to find in the DOM which is dynamically loaded and execute..

我发现这篇帖子确实似乎解决了同样的问题,但使用了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);
  });

Any help on guidance on this would be greatly appreciated! Thanks for your time.

任何有关此指导的帮助将不胜感激!谢谢你的时间。

2 个解决方案

#1

It seems that the healcode.js is doing a lot of stuff. There is a whole lot of markup added to the <healcode-widget> tag.

似乎healcode.js正在做很多事情。标记中添加了大量标记。

I would try to add another tag with an id inside and test for its existence:

我会尝试在内部添加另一个带有id的标记并测试它的存在:

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

Test in an interval for the existence of healCodeLoading inside <healcode-widget>: (Assuming jQuery)

在里面测试healCodeLoading存在的间隔:(假设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 should replace everything inside <healcode-widget></healcode-widget> during init. So, if your <div>-element is no longer inside, the widget has loaded and initialized.

healcode.js应该在init期间替换中的所有内容。因此,如果

-element不在内部,则窗口小部件已加载并初始化。

Hope that helps.

希望有所帮助。

#2

If you just want to load some markup and content and then run some script afterwards, you can use jQuery. You should use something like the following in script#1 to run a function in script#2

如果您只想加载一些标记和内容,然后再运行一些脚本,则可以使用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");
});

The function is called, after ajax/test.html is loaded.

在加载ajax / test.html之后调用该函数。

Hope that helps

希望有所帮助

#1