0

See how this page loads its content for a while, then triggers the javascript after some delay? http://nomoresnoring.com/new/

How can I make things load more smoothly? Should anything be reordered?

Header:

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

Footer:

<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>
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
pianofighter
  • 85
  • 1
  • 2
  • 8
  • 2
    Combine them scripts, compress the output and serve as one resource.. Try putting as many of them as possible in the footer.. Do not load *rhinoslider-1.05.min.js* twice.. – techfoobar May 06 '13 at 17:14
  • You are including rhinoslider twice??? – A. Wolff May 06 '13 at 17:14
  • requirejs might be helpful. – zzzzBov May 06 '13 at 17:18
  • 1
    Rhinoslider should not be included twice. JS loads best as the last thing on the page? And is there any sort of service for combining and compressing JS? I've run into trouble combining before. – pianofighter May 06 '13 at 17:25
  • Actually loading scripts at the end of the body is what's *causing* the exaggerated jumpiness. If your scripts were in head the load would be slower, but elements from the body wouldn't render on screen until those scripts were loaded. The huge jump now is because rhinoslider is coming in doing its work after the whole dom is loaded. Also, if you're using modernizr, you might want to consider making use of its script loader. – numbers1311407 May 06 '13 at 17:27
  • I'm very new to JS, and completely new to modernizr. Where can I learn more about its script loader? – pianofighter May 06 '13 at 17:32
  • (Additionally, is there an argument to be made for not using modernizr? I'm using it on a vague recommendation, but largely unaware of the benefits) – pianofighter May 06 '13 at 17:36
  • Modernizr serves to inform you of the modern feature compatibility of the browser, allowing you to add polyfills where needed, change styles, etc. If you don't need to do these things, you probably don't truly need modernizr. It also can be compiled with a resource loader though, which is useful. [link to docs](http://modernizr.com/docs/#load) – numbers1311407 May 06 '13 at 17:39
  • @numbers1311407, since moving all my custom functions (functions.js) into the header, none of them work. Ideas? – pianofighter May 06 '13 at 18:05
  • Remember that anything you want to happen when the page is ready needs to occur inside a `$(function () { ... })` (or `window.onload`) – numbers1311407 May 06 '13 at 18:08
  • So there are elements of functions.js that improperly formatted? – pianofighter May 06 '13 at 18:10

1 Answers1

0

You can do:

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

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

You could use a preloader animation too.

A. Wolff
  • 74,033
  • 9
  • 94
  • 155