jQuery的加載異步，而不是工作

爲了優化我的文檔的負荷準備的功能，我用它來裝載jQuery的異步像jQuery的加載異步，而不是工作

<script async type="text/javascript" src="js/jquery-1.12.3.min.js"></script>

然後我使用jQuery調用腳本：

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
    App.init(); 
    OwlCarousel.initOwlCarousel(); 
    FancyBox.initFancybox(); 
    StyleSwitcher.initStyleSwitcher(); 

    }); 
</script>

它返回我jQuery沒有定義。

我不知道我該用什麼，我雖然.readyfunction會等到直到調用它之前加載所有文檔。

相同的boostrap庫，它告訴我，jquery沒有定義。

我試過讓腳本在最後加載，但它仍然無法正常工作。

任何幫助將不勝感激。

來源

2016-05-17 Stanislas Piotrowski

由於jQuery腳本異步加載，jquery沒有加載你的腳本執行的時刻。所以，你需要等待它通過對負載事件訂閱類似這樣的加載：

<script async id="jquery" type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script> 
Then I call a script using jquery : 

<script type="text/javascript"> 
    document.getElementById('jquery').addEventListener('load', function() { 
    App.init(); 
    OwlCarousel.initOwlCarousel(); 
    FancyBox.initFancybox(); 
    StyleSwitcher.initStyleSwitcher(); 
    }); 
</script>

但我不知道爲什麼有人想要做這樣的事情。

爲了優化頁面加載速度，最好是把所有的JavaScript你在身體的末端，所以內容將首先裝載和腳本不會耽誤頁面渲染事件，如果是同步加載。

來源

2016-05-17 09:35:21 Andrey

這是不正確的 - 在內容加載後，主體末端的JS將_start_加載，導致'不可思議的山谷'：頁面看起來加載，但沒有任何工作，直到JS加載。這在特定情況下可能是可取的，但它不會更好。同時，當您的內容加載時，在''中的'

問題Script Tag - async & defer對您的問題有很好的答案。

概括地說，你可以不加載的jQuery或其他庫，asyncronously當其他一些腳本依賴於它沒有一些額外的asyncronous處理執行取決於庫的腳本。

來源

2016-05-17 09:27:50 ighea

-2

你用異步加載當您嘗試訪問的Jquery這不加載到瀏覽器可以訪問jQuery的後頁加載完成。

加載jquery通常解決您的問題。

來源

2016-05-17 09:50:27 Nariman

jQuery和依賴於jQuery的所有組件（包括Bootstrap）都依賴於掛鉤DOMContentLoaded事件來設置事件。

這意味着jQuery的（和使用$(function() {...})任何東西）必須前DOMContentLoaded大火被下載，也從來沒有勾搭其事件。

反過來，這意味着<script async ...將是不可靠的，打破jQuery的時候需要更長的時間來下載超過頁面內容一樣。

不幸的是<script defer ...doesn't work either感謝jQuery試圖儘快發射document.readyState === "interactive"。

您可以加載內容，然後通過將<script>在<body>結束加載jQuery的，但是這將導致出現在網頁和任何jQuery的射擊之間出現明顯的暫停 - 用戶將無法點擊任何東西，可視化組件都不會出現，等等。

來源

2017-02-23 10:49:57 Keith

這是我的解決方案：

<script async type="text/javascript" src="path_to_jquery" id="jquery_script_tag"> 
    </script> 

    <script> 
    if (!('jQuery' in window)) 
    { 
     window.jQueryQueue = []; 
     //define temporary jQuery function 
     window.jQuery = function(){ 
      //just save function parameters to queue 
      jQueryQueue.push(arguments); 
     } 
     document.getElementById('jquery_script_tag').addEventListener('load', function(){ 
      //call jQuery with parameters saved in queue, after it loaded 
      for (var i in jQueryQueue) 
       jQuery.apply(document, jQueryQueue[i]); 
     }); 
    } 
    </script>

該代碼定義，如果尚未確定它臨時的jQuery功能。該函數將所有jQuery函數調用保存爲隊列，而真正的jQuery尚未加載（而不是調用未定義的jQuery函數）。當jQuery加載時，它會調用隊列中的jQuery函數，其參數與以前調用的參數相同。

來源

2017-10-18 10:49:24

請解釋您的解決方案。出現了什麼問題以及如何解決問題，而不是簡單地粘貼代碼。 –

此代碼將所有jQuery函數調用緩存到隊列中，而jQuery尚未加載（而不是調用未定義的jQuery函數）。當jQuery加載時 - 它調用與以前調用的參數相同的jQuery –

您的解釋應該包含在答案中而不是評論中。請編輯您的答案並在其中包含解釋。 –

相關問題

jQuery的加載異步，而不是工作

回答

相關問題