Question

我有一个js.js脚本来处理我所有的jQuery函数。文档准备好之后我逐个称呼它们，如下所示：

function 1(){}
function 2(){}

jQuery(document).ready(function($){ 
    function 1();
    function 2();
});

我还有一个外部JavaScript，我在我网站的标签内调用：

<script type="text/javascript" src="myscript"></script>

这个脚本的问题在于它从外部网站加载，有时非常慢，导致整个网站变慢。

在文档准备好之后，我可以将它加载到我的js.js文件中吗？让我们说在函数2（）之前？

有什么想法吗？

Answer 1

您正在寻找$.getScript(url)，这正是如此。

Answer 2

除了SLaks的答案，您可以使用库来组织您的JavaScript文件包含。如果您有许多文件和依赖项，它会很有用。

例如，请查看head.js。

head
  .js("jquery.js", "selectivizr.js") // these are loaded in parallel
  .js("jquery-ui.js"); // this is loaded after the scripts above

head.ready(function() {
  jQuery(document).ready(function($) { 
    function1();
    head.js("other-script.js", function() {
      function2();
      // your code
    });
  });
});

function 1(){}
function 2(){}

更好的解决方案是将所有javascript功能组织成单独的文件，并使用headjs loading：

head
  .js("jquery.js", "selectivizr.js") // these are loaded in parallel
  .js("jquery-ui.js"); // this is loaded after the scripts above
  .js("app1.js"); // contains function1()
  .js("app2.js"); // contains function2()

head.ready(function() {
  jQuery(document).ready(function($) { 
    // your code
  });
});

Answer 3

首先，请务必将<script type="text/javascript" src="myscript"></script>放在html页面的末尾，就在</body>结束标记之前。

此外，您可以使用RequireJS，这是一个脚本，允许您在需要时异步加载js文件，即使在加载整个页面之后也是如此。您可以通过Ajax加载脚本并手动管理工作流程来自行完成，但我建议您使用这个功能强大的脚本。

文档就绪后调用外部js脚本

3 个答案: