在Javascript之前加載CSS

-1

我設計了自定義導航欄/菜單。目前，它從我的style.css調用CSS和使用以下設置在Javascript之前加載CSS

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

內部JS似乎導致與CSS加載一個問題包含在PHP文件所使用的JS。

有沒有什麼辦法可以在JS之前加載被調用的CSS，同時保持原樣，而不必將Javascript放在單獨的.js表單上？

到目前爲止已經試過：

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

和

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

誰能告訴我在哪裏，我都在哪裏呢？我正在考慮它的.ready部分，但如果是這樣，不確定如何擺脫它而不影響JS的工作方式？

如果我將JS移動到頭部並放置在CSS下面，它可能會有所不同嗎？

來源

2017-09-26 PaulMcF87

爲什麼你認爲內部JS是造成問題的CSS加載？什麼樣的問題？ – 2017-09-26 10:25:54

將JavaScript放在結尾身體標記之前。 –

@Znaneswar你的建議需要jQuery，但OP可能使用普通的JS。 – debute

只需在你的身體標記中使用onload事件並將你的js包裹在一個函數中。

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

來源

2017-09-26 10:26:59

我已經嘗試過了，上面的選項。沒有似乎work.I完全喪失，沒有線索還有什麼其他嘗試:-(lol – PaulMcF87

我已經包含在上面的問題中使用的確切JS – PaulMcF87

事實上，您正在使用jQuery $（document）.ready（）應該準確地做你想做的事情，如果不是這個問題可能是由不同的東西引起的。https://learn.jquery.com/using-jquery-core/document-ready/ 你的控制檯是否有任何錯誤？你能創建一個小提琴嗎？ –

-1

在腳本中寫：

window.onload=function(){ 
    //Your JS script 
}

有了這個代碼將在頁面後執行將負載完全

來源

2017-09-26 10:32:56 Corxo

我試過這個，它似乎沒有工作。我已經包含了我在問題中使用的確切JS。 – PaulMcF87

在Javascript之前加載CSS

回答

相關問題