document.ready（）上的Javascript文件优先级

当我们使用文档准备好内联脚本函数时，按照需要的顺序调用JavaScript文件很重要吗？document.ready（）上的Javascript文件优先级

例如，假设我想在jQuery Waypoint下调用jQuery的反向插件。它需要在文档的页眉分别加载了jQuery，航点和最终反了脚本，并在下面的内嵌脚本调用counterup()：

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

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

是否需要分别在主体底部调用所需文件？（例如，在所有其它的库的结束进口jquery.min.js。）

来源

2014-09-30 bobsilon

如果导入'jquery'，...低于任何使用try的脚本在评估时使用jQuery，则它将失败。例如如果你想把你的示例代码放在'$（document）.ready'中，它仍然需要在之前包含'jQuery'。如果你把它放在一个由'setTimeout'调用的回调函数中，如果在这段时间内加载了'jQuery'，它可能会工作。 – 2014-09-30 07:43:41

@您指出的Rraham问题是关于内联脚本的优先级。但是我询问了内联脚本所需的链接JavaScript文件的优先级。他们是平等的吗？！ – bobsilon 2014-09-30 07:49:23

$将抛出基准误差如果jQuery的没有前文所定义（即，如果jquery.min.js不$求值之前导入）。

所以你必须首先在<script>之前用jquery添加一个<script>标签，用你的自定义代码，顺便说一下，它应该在一个单独的文件中。

然后，由于<script>可以修改DOM，因此即使您将它们放在<html>标记之外，在所有JS文件被下载并评估和执行之前，“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

来源

2014-09-30 08:08:21 laruiss

只是为了完整性：'script'标签必须是'head'或'body'的后代。如果它是'html'的孩子，或者甚至不在'html'之外，那么这将是无效的HTML，然后浏览器需要修复它。关于ready事件：脚本被标记为“async”或“defer”，或者脚本的加载和执行被前面包含的脚本抑制/延迟时，可能会有异常。 – 2014-09-30 23:27:06

document.ready（）上的Javascript文件优先级

回答

相关问题