如何使用HTML同時加載Javascript

Question

是否有任何技術在HTML呈現的同一時間渲染javascript文件？

我的第一個想法是將它加載到<script>標記的頭部，但正如我所見，這不會影響加載順序，或者我錯了？

問題是，在某些時候，我需要使用JavaScript來設置元素的寬度，當頁面加載時，它真的很煩人的小振動是什麼，因爲JavaScript代碼設置元素寬度後呈現在元素HTML。

Answer 1

除非您設置了異步標誌（在某些瀏覽器中），否則JS文件將阻止加載內容。所以你可以從它加載的那一刻起運行你的JS腳本。

儘管你看了CSS解決方案可能會更好。

支持異步代碼：Which browsers support <script async="async" />?

Answer 2

使元素在HTML渲染爲不可見，並有JavaScript的設置，那麼寬度使其可見。

Answer 3

您可以在內聯腳本塊中使用document.write來輸出元素的HTML，包括內聯style。雖然它會很醜陋;你確定你無法避免整個事情嗎？

編輯：一個更簡潔的方法是document.write一個內聯樣式塊，它在元素的HTML之前使用一個id選擇器來設置元素的寬度;這將降低更好，但仍避免訪問DOM它已經準備好之前，任何潛在的問題：

<script type="text/javascript"> 
    var width = ...; 
    document.write('<style type="text/css">#myid{width:' + width + 'px;}</style>'); 
</script> 
<div id="myid">...</div> 

Answer 4

是的，你可以用一個微小的加載器的JavaScript像JcorsLoader（僅647B用gzip）

JcorsLoader.load(
       "http://xxxx/jquery.min.js", 
       function() { 
        $("#demo").html("jQuery Loaded"); 
       }, 
       "http://xxxx/jquery.cookie.js", 
       function() { 
        $.cookie('not_existing'); 
       } 
      ); 

載倍數js並行並按順序執行而不阻塞DOMReady或onload。

https://github.com/pablomoretti/jcors-loader