Javascript 为什么'；t脚本加载时间<；脚本>；从身体到头部？_Javascript_Jquery_Fancybox

Javascript 为什么'；t脚本加载时间<；脚本>；从身体到头部？

javascript jquery

Javascript 为什么'；t脚本加载时间<；脚本>；从身体到头部？,javascript,jquery,fancybox,Javascript,Jquery,Fancybox,我是新手。这里有两个几乎相同的html。顶部的一个可以工作，底部的一个由于某种原因不能工作（从主体到主体移动了2列）。为什么中包含所有的那一个不起作用？这一个有效： <!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="jquery.js"></script> <link rel="stylesheet" href="fancybox.css"

我是新手。这里有两个几乎相同的html。顶部的一个可以工作，底部的一个由于某种原因不能工作（从主体到主体移动了2列）。为什么

中包含所有

的那一个不起作用？这一个有效：

<!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>


$（文档）.ready（函数（）{
$（“.fancybox”）.fancybox（）；
});

这个没有：

<!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>


$（文档）.ready（函数（）{
$（“.fancybox”）.fancybox（）；
});

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

首先，脚本包含的内容可能总是在标题中

<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>

现在。。FancyApp自己将已加载的部分直接放在要添加fancybox的图像下方。所以这可能有一个原因——至少对于他们的演示页面来说是如此——但我认为应该可以删除document.ready部分，并尝试一下

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


$（函数（）{
$（“.fancybox”）.fancybox（）；
});

因此，你最终会：

<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”）.fancybox（）；
});

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

这些是问题，而不是答案。这应该在评论区域中。。。这不是一个答案上面应该是注释，而不是答案是的，在includes.jquery.js中包含fancybox的版本（即标题）。这是一个很好的剧本。一个没有把所有东西都放进去的人。我马上就来拉小提琴。真的没什么进步。“底部代码”是OP描述为工作的代码。OP显示正在移动的代码。jquery脚本仍然存在。请尝试先验证页面，然后查找可能的非闭合标记。另外，您似乎正在使用HTML5标记，但没有在validator.w3.org上传递HTML5

DOCTYPE

。用这两个插件的完整html更新了OP，使其更清晰。这并不重要，您可以在加载js插件文件之后，在html代码之前放置自定义fancybox脚本，因为您使用的是

$（function（）{…}），这将使脚本等待DOM就绪。。这并不重要，是的，这就是为什么我使用$（function（）{…}）不幸的是，我有一个插件，它甚至要求代码直接放在容器之后。由于我没有用fancybox彻底测试，我补充说“如果我是正确的…”