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

时间:2015-11-25 18:52:29

标签: javascript jquery dynamic

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

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

如果脚本#1成功加载动态内容,我怎样才能执行我的脚本?

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

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

2 个答案:

答案 0 :(得分:1)

如果您只想加载一些标记和内容,然后再运行一些脚本,则可以使用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后调用该函数。

希望有所帮助

答案 1 :(得分:1)

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

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

<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应该在init期间替换<healcode-widget></healcode-widget>内的所有内容。因此,如果您的<div> - 元素不在内部,则窗口小部件已加载并初始化。

希望有所帮助。