当<script>从body移动到head?</script>时,为什么不加载脚本?

时间:2013-02-10 23:07:35

标签: javascript jquery fancybox

这里是新手。这里有2个几乎相同的html。顶部的一个工作,底部的工作不是出于某种原因(从主体到头部移动了2 <script>列)。为什么<script><head>的所有<!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>

这个没有:

{{1}}

2 个答案:

答案 0 :(得分:0)

首先,脚本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>

现在.. fancapps他们自己把onload部分直接放在他们想要添加fancybox的图像下面。所以这可能有一个原因 - 至少对于他们的演示页面 - 但我认为应该可以删除document.ready部分并给它一个镜头。

<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-link之后调用fancybox

答案 1 :(得分:-2)

两个版本之间没有区别,除了底部代码在jquery.fancybox.pack.js之前不包含jquery.js脚本标记。一切都会有效。