Loading CSS before Javascript

Question

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?

Why do you think the internal JS is causing a problem with the CSS loading? What kind of problem? — user663031
– user663031, Commented Sep 26, 2017 at 10:25
@Znaneswar your suggestion requires jQuery, but OP probably uses plain JS. — Patrik Krehák
– Patrik Krehák, Commented Sep 26, 2017 at 10:30

M.Go · Accepted Answer · 2017-09-26 10:26:59Z

1

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>

answered Sep 26, 2017 at 10:26

M.Go

693 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

PaulMcF87 Over a year ago

I have tried this, and the options above. none seem to work.I am at a total loss,have no clue what else to try :-( lol

PaulMcF87 Over a year ago

I have included the exact JS used in the question above

M.Go Over a year ago

In fact that you are using jQuery $(document).ready() should exactly do what you want. If not the problem may caused by something different. learn.jquery.com/using-jquery-core/document-ready Did you have any errors in your console or are you able to create a fiddle?

PaulMcF87 Over a year ago

So as it is currently set up i should not need to use any sort of onload?.. I have no clue what is happening then. first time I load the site after clearing cache the menu displays all broken up as a list with bullet points, with no container. after refresh the menu is as it should be... Could it make a difference if I move the JS from the body to the head under the called CSS?

M.Go Over a year ago

sounds like you don't have any js problems. You better should provide a link to you little project.

|

Collectives™ on Stack Overflow

Loading CSS before Javascript

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related