2

我知道将 javascript/jquery 放在页面底部是一种最佳做法。

但是我究竟如何才能实现这种“最佳实践”？

在我当前的 webproject (MVC4) 中，我将我的 javascript 放在了底部。但是除非我将我的 javascript 放在标题中（这被认为是不好的做法？），否则我无法进行任何工作。

<body>
<div id="container">
  <div id="header">
  </div>

  <div id="content">
    <!--js function that calls upon jQuery (slider) -->
  </div>
</div>

  <!--Javascript declaration-->
</body>

例如：

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <script type="text/javascript" src="js/slider.js"></script>

函数 slider.js 需要 jQuery 才能使我的滑块工作。

如果函数需要访问它，有没有办法将我的所有 javascript 文件（包括 jQuery）保留在底部并加载 jQuery（或其他函数/库）？

更新

问题似乎出在 MVC bundles上。当我将 javascript 文件以正常语法放在底部时，一切正常。

是否需要单独的捆绑包？不确定 MVC 以何种顺序加载包。

应用这种bundle时（jquery先跟js函数），执行顺序是错误的。

因此，我无法真正看到捆绑的优势，有人愿意解释吗？

 bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-1.7.1.js",                    
                        "~/Scripts/js/slider.js"));

谢谢。

4

2 回答 2

0

这很好的原因是浏览器与网页同步加载脚本。因此，如果您将它们放在顶部，加载大脚本将停止内容加载。如果将它放在 body 标签关闭之前的底部，内容将首先加载，从而使页面弹出更快而不会出现脚本停顿。

要解决您的问题，请将所有执行代码包装在 document.ready 或 jquery 等效项中：

$(function(){
//your code here
})

如果 jQuery 尚未加载，您可以使用 console.log 检查：

if(!window.jQuery)
{
console.log("problem");
}

您在这里没有提供太多信息，这使得调试变得困难。我所能做的就是给你做这件事的步骤。您只需要确保在页面上运行任何其他脚本之前加载 jQuery。

您的页面中有内联脚本标签吗？

于 2013-01-28T22:05:56.297 回答
-1

只要 jQuery 导入在您的脚本之前，您应该能够将它们放在底部。您的页面中是否还有其他依赖于这些脚本的 javascript？

于 2013-01-28T22:07:15.137 回答