CODEWITHSUNDEEP
javascripthtmlcssperformance
PaulMcF87
PaulMcF87

Reputation: 415

Loading CSS before Javascript

I have designed custom navbar/menu. It currently calls CSS from my style.css and the JS which is used is included in the PHP file using the following setup

 <link rel="stylesheet" href="style.css" type="text/css">
 <nav> ... </nav>
 <script>
$(function () {
        $('.toggle-menu').click(function (){
        $('.exo-menu').toggleClass('display');

        });
    });
    jQuery(document).ready( function ( $ ){
        $(".change>a").hover( function () { 
            $(this)[0].click();
        }, 
        function () {
        /* code for mouseout */
    });
    });
</script>

The internal JS seems to be causing a problem with the CSS loading.

Is there any way I can load the called CSS before the JS whilst keeping it as is, without putting the Javascript on a seperate .js sheet?

So far have tried:

<head>
   <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body onload="initNavigation()">
    <nav> ... </nav>
    <script>
        function initNavigation() {
            $(function () {
                $('.toggle-menu').click(function (){
                $('.exo-menu').toggleClass('display');
                });
            });
            jQuery(document).ready( function ( $ ){
                $(".change>a").hover( function () { 
                $(this)[0].click();
                }, 
                function () {
                /* code for mouseout */
                });
            });
        }
    </script>
</body/>

and

<head>
   <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
    <nav> ... </nav>
    <script>
        window.onload=function(){
            $(function () {
                $('.toggle-menu').click(function (){
                $('.exo-menu').toggleClass('display');
                });
            });
            jQuery(document).ready( function ( $ ){
                $(".change>a").hover( function () { 
                $(this)[0].click();
                }, 
                function () {
                /* code for mouseout */
                });
            });
        }
    </script>
</body/>

Can anyone tell me where I have went wrong? i am thinking its the .ready part but if it is, not sure how to get rid of it without affecting how the JS works?

Might it make a difference if I moved the JS to the head and placed it below the CSS?

Upvotes: 1

Views: 1577

Answers (1)

M.Go
M.Go

Reputation: 69

Just use the onload event in your body tag and wrap your js in a function.

<head>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body onload="initNavigation()">

  <nav></nav>

  <script>
    function initNavigation() {
      // your script goes here
    }
  </script>
</body>

Upvotes: 1

Related Questions