为什么不't当<脚本>从身体移动到头部

Why doesn't script load when <script> moved from body to the head?

本文关键字：移动 头部 脚本 lt 为什么不 gt      更新时间：2023-09-26

jS新手在这里。这里有两个几乎相同的html。顶部的一个有效，底部的一个由于某种原因不起作用（从正文到标题移动了2个<script>列）。为什么<head>中包含所有<script>的那个不起作用？这个有效：

<!DOCTYPE HTML>
<html>
 <head>
  <script type="text/javascript" src="jquery.js"></script>
  <link rel="stylesheet" href="fancybox.css" type="text/css" media="screen" />
</head>
<body>
    <div id="center">
    <a class="fancybox" href="imagelarge.jpg"><img src="image.jpg" alt="" /></a>
</div>
<script type="text/javascript" src="jquery.fancybox.pack.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });
</script>

</body>
</html>

这个没有：

<!DOCTYPE HTML>
<html>
 <head>
  <script type="text/javascript" src="jquery.js"></script>
  <link rel="stylesheet" href="fancybox.css" type="text/css" media="screen" />
  <script type="text/javascript" src="jquery.fancybox.pack.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });
</script>
</head>
<body>
   <div id="center">
    <a class="fancybox" href="imagelarge.jpg"><img src="image.jpg" alt="" /></a>
     </div>
    </body>
</html>

首先，脚本include可能总是在头中

<head>
  <script type="text/javascript" src="jquery.js"></script>
  <link rel="stylesheet" href="fancybox.css" type="text/css" media="screen" />
  <script type="text/javascript" src="jquery.fancybox.pack.js"></script>
</head>

现在。。粉丝应用程序本身将加载部分直接放在他们想要添加粉丝盒的图像下面。所以这可能是有原因的，至少对于他们的演示页面来说是这样，但我认为应该可以直接放下文档。准备好部分并进行拍摄。

<script>
$(function(){
    $(".fancybox").fancybox();
});</script>

所以你最终得到了：

<head>
  <script type="text/javascript" src="jquery.js"></script>
  <link rel="stylesheet" href="fancybox.css" type="text/css" media="screen" />
  <script type="text/javascript" src="jquery.fancybox.pack.js"></script>
  <script>
    $(function(){
      $(".fancybox").fancybox();
    });
  </script>
</head>

如果我是正确的，这会稍微改变执行顺序，该函数将在页面不仅完全加载，而且也完全解析后调用，因此在将fancybox类分配给img链接

后调用fancybox

这两个版本没有区别，只是底部代码在jquery.fancybox.pack.js之前没有包含jquery.js脚本标记。一旦包含，一切都会正常工作。

相关文章：