Javascript文件document.ready(）的优先级

Javascript Files Priority on document.ready()

本文关键字：优先级 ready 文件 document Javascript      更新时间：2023-09-26

当我们为内联脚本函数使用文档就绪时，按需要的顺序调用JavaScript文件是否重要？

例如，假设我想在jQueryWaypoints下调用jQuery的counter-up插件。需要在文档的头中分别加载jQuery、Waypoints和count-up脚本，并在内联脚本中调用counterup()，如下所示：

    <script>
        $('.counter').counterUp({
            delay: 10,
            time: 1000
        });
    </script>

如果我在$(document).ready下调用该函数并将脚本导入语句移动到<body>的底部，会发生什么？

是否需要分别调用正文底部所需的文件？（例如，在所有其他库的末尾导入jquery.min.js。）

$如果之前未定义jQuery（即，如果在评估$之前未导入jQuery.min.js），则会引发引用错误。

因此，您必须首先在带有自定义代码的<script>之前添加带有jquery的<script>标记，顺便说一句，该标记应该在一个单独的文件中。

然后，由于<script>可以修改DOM，所以在下载、评估和执行所有JS文件之前，即使将它们放在<html>标记之外，也不会触发"DOM就绪"事件。

也就是说，如果（并且只有当）你的带有插件的代码都在"domready"回调中，你可以在自定义代码之后添加带有插件的脚本标记，如下所示：

<!DOCTYPE html>
<html>
<head>
  <title>JS Bin</title>
  <meta charset="utf-8">

  <link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.tooltipster/2.1.4/css/tooltipster.css">
</head>
<body>
  <div id="test" title="Beautiful tooltip plugin!">Hello world!</div>
</body>
  </html>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <script>
    jQuery(function($) {
      $("#test").tooltipster();
      console.log('Test OK');
    });
  </script>
  <script src="//cdn.jsdelivr.net/jquery.tooltipster/2.1.4/js/jquery.tooltipster.min.js"></script>

请参阅jsbin

相关文章：