Javascript 加载顺序 - 防止页面跳转答案

【问题标题】：Javascript Loading Order – Prevent Page JumpinessJavascript 加载顺序 - 防止页面跳转
【发布时间】：2013-05-06 17:12:43
【问题描述】：

看看这个页面如何加载它的内容一段时间，然后在一些延迟后触发 javascript？ http://nomoresnoring.com/new/

如何让加载更顺畅？是否应该重新排序？

标题：

<head>
<script src="_/js/modernizr.custom.min.js"></script><!-- modernizr -->
<script src="//code.jquery.com/jquery-latest.min.js"></script><!-- jquery -->
<script src="_/js/jquery.leanModal.min.js"></script><!-- leanModal -->
<script src="_/js/jquery.sticky.min.js"></script><!-- sticky -->
<script src="_/js/jquery.customSelect.min.js"></script><!-- customSelect -->
<script src="_/js/jquery.scrollUp.min.js"></script><!-- scrollUp -->
<script src="_/js/happy.js"></script><!-- happy.js -->
<script src="_/js/happy.methods.js"></script><!-- happy.js -->
<!-- some other things -->
<script src="_/js/rhinoslider-1.05.min.js"></script><!-- rhinoslider -->
</head>

页脚：

<script type="text/javascript" src="_/js/functions.js"></script><!-- all custom functions -->
<script src="_/js/rhinoslider-1.05.min.js"></script><!-- for Rhinoslider -->
<script src="_/js/mousewheel.js"></script><!-- for Rhinoslider -->
<script src="_/js/easing.js"></script><!-- for Rhinoslider -->
</body>
</html>

【问题讨论】：

组合它们的脚本，压缩输出并作为一个资源。尝试将它们尽可能多地放在页脚中。不要加载 rhinoslider-1.05.min.js i> 两次..
你把 rhinoslider 加了两次？？？
requirejs 可能会有所帮助。
Rhinoslider 不应包含两次。 JS 最好作为页面上的最后一件事加载？是否有任何组合和压缩 JS 的服务？我之前遇到过组合问题。
实际上在正文的末尾加载脚本是导致夸张的跳跃。如果您的脚本在 head 中，则加载速度会更慢，但是在加载这些脚本之前，body 中的元素不会呈现在屏幕上。现在的巨大飞跃是因为 rhinoslider 在整个 dom 加载后才开始工作。此外，如果您使用的是modernizr，您可能需要考虑使用它的脚本加载器。

标签： javascript html fouc

【解决方案1】：

你可以这样做：

    //just before closing head tag
    <style>body{display:none}</style>
</head>

    //just before closing body tag
    window.onload = function(){
        $('body').fadeIn();
    };
</body>

您也可以使用预加载器动画。

【讨论】：