在其他腳本之前異步加載jquery

Question

我已將async attrib添加到我的JavaScript包含HTML中。
所以現在我：

<script async src="jquery.myscript.js"></script> 

這適用於所有的JS我負載，所有除jQuery的。

如果我將async添加到jQuery <script>標記其他所有依賴jquery的腳本都不起作用。

在此的jsfiddle你可以看到問題：
http://jsfiddle.net/uFbdV/

在我使用<script> Mycode </script>，而不是包括外部file.js的例子，但這並不改變這種狀況。

我想用異步attrib運行jQuery，並且只有在加載jquery後才能異步運行其他幾個外部腳本。

有可能嗎？

Answer 1

我想運行異步attrib的jQuery和異步運行其他幾個外部 腳本只有在jquery加載後。

這是什麼意思？這聽起來很像你想先加載jQuery，然後再加載其他東西。所以你想同步加載它。如果您仍想使用async的方法，您可以定義一個onload函數，在jQuery準備就緒後繼續加載其他內容。或者你可以使用defer。上述這些問題都在這裏解釋：https://davidwalsh.name/html5-async

Answer 2

這可能是你在找什麼：
http://www.yterium.net/jQl-an-asynchronous-jQuery-Loader - JQL異步jQuery的裝載機。

它異步加載的jQuery不會阻塞其他組件：

jQl.loadjQ('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'); 

JQL自動捕獲所有jQuery().ready()電話，所以你可以寫：

<script type="text/javascript"> 
    jQl.loadjQ('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'); 
    jQuery('document').ready(function(){ 
    alert('Hello world'); 
    }); 
</script> 

JQL將排隊這些函數調用，並執行它們作爲一旦jQuery被加載並且DOM已經準備就緒，因爲它們將以通常的方式執行。

Answer 3

這是一個偉大的用例爲defer：

<script defer src="jquery.js"></script> 
<script defer src="custom.js"></script> 

無論這些標籤將阻止渲染。瀏覽器可以並行下載jquery.js和custom.js。一旦它被下載並且DOM已經被加載，它將會立即執行jquery.js，然後custom.js將被執行。

可悲的是，有幾個問題：

• 您不能使用內嵌腳本defer屬性。
• IE < 10已被記錄爲導致使用defer到unexpectedly interleave their execution的腳本。
• 我找不到任何說明defer命令的腳本按順序執行的規格，只是爲了在DOM加載後執行它們。

Answer 4

<script>var JSdep = [ 
     ["//ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.4.min.js", "window.jQuery", "/bundle/jquery"], 
     ["//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js", "self.framework === 'bootstrap'", "/bundle/bootstrap"], 
     ["//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js", "window.jQuery && window.jQuery.ui && window.jQuery.ui.version === '1.12.1'", "/bundle/jqueryui"], 
     ["//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js", "window.jQuery && window.jQuery.fn.selectpicker", "/bundle/bootstrap-select"], 
    ] 
</script> 
<script type="text/javascript"> 
    var downloadJSAtOnload = function (e) { 
     var src = e.srcElement.src.toString(); 
     //console.log("[jquery] loaded", src); 
     for (var i = 0; i < JSdep.length; i++) { 
      if (src.indexOf(JSdep[i][0]) !== -1) { 
       if ((!JSdep[i][1]) || (eval(JSdep[i][1]))) { 
        console.log("[jquery] loaded ok", src); 
        break; 
       } else { 
        console.log("[jquery] fail", src); 
        return; 
       } 
      } 
     } 
     if (i === JSdep.length) { 
      console.log("[jquery] fallback loaded ok", src); 
     } 
     if (jqloaded) { 
      return; 
     } 
     jqloaded = true; 
     for (var i = 1; i < JSdep.length; i++) { 
      //console.log("[jquery] loading", JSdep[i][0], JSdep[i][1], JSdep[i][2]); 
      var raf2 = requestAnimationFrame || mozRequestAnimationFrame || 
       webkitRequestAnimationFrame || msRequestAnimationFrame; 
      if (raf2) { window.setTimeout(dljquery([JSdep[i][0], JSdep[i][1], JSdep[i][2]]), 0); } 
      else window.addEventListener('load', dljquery([JSdep[i][0], JSdep[i][1], JSdep[i][2]])); 
     } 
    } 
    var downloadJSAtOnerror = function (e) { 
     var src = e.srcElement.src.toString(); 
     console.log("[jquery] error", src); 
     for (var i = 0; i < JSdep.length; i++) { 
      if (src.indexOf(JSdep[i][0]) !== -1) { 
       console.log("[jquery] failed try fallback", src); 
       dljquery([JSdep[i][2], JSdep[i][1]]); 
       return; 
      } 
     } 
     console.log("[jquery] failed on fallback", src); 
     return; 
    } 
    // Add a script element as a child of the body 
    var dljquery = function (src) { 
     //console.log("[jquery] start", src); 
     var element = document.createElement("script"); 
     element.src = src[0]; 
     element.async = "async"; 
     try { 
      document.body.appendChild(element); 
     } catch (err) { 
      console.log("[jquery] err", err); 
     } 
     if (element.addEventListener) { 
      element.addEventListener("load", downloadJSAtOnload, false); 
      element.addEventListener("error", downloadJSAtOnerror, false); 
     } else if (element.attachEvent) { 
      element.attachEvent("onload", downloadJSAtOnload); 
      element.attachEvent("onerror", downloadJSAtOnerror); 
     } else { 
      element.onload = downloadJSAtOnload; 
      element.onerror = downloadJSAtOnerror; 
     } 
    } 
    //  var fb = "/bundle/jquery"; 

    var raf = requestAnimationFrame || mozRequestAnimationFrame || 
     webkitRequestAnimationFrame || msRequestAnimationFrame; 
    if (raf) raf(function() { window.setTimeout(dljquery([JSdep[0][0], JSdep[0][1], JSdep[0][2]]), 0); }); 
    else window.addEventListener('load', dljquery([JSdep[0][0], JSdep[0][1], JSdep[0][2]])); 

    var jqloaded = false; 

    function doOnload() { 
     console.log("[jquery] onload"); 
    } 
    // Check for browser support of event handling capability 
    if (window.addEventListener) 
     window.addEventListener("load", doOnload, false); 
    else if (window.attachEvent) 
     window.attachEvent("onload", doOnload); 
    else window.onload = doOnload; 
</script> 

發現 我曾與引導加載問題有時jQuery的 現在NP之前希望它可以幫助別人 我把這個腳本在頭，但給了一個錯誤傾斜的appendChild現在它的前 /身體檢查所有瀏覽器的作品我嘗試腳本 異步但它沒有一個事件，告訴我什麼時候下載結束 和有時在jquery之前加載引導程序，反之亦然，因爲 bootstrap依賴於jquery我必須加載jquery，然後啓動 下載引導現在我來補充後備

固定它

現在它會檢查JQ加載

，然後才加載他人

確定現在它的複製粘貼

Answer 5

此功能對於很有用javascript異步加載：

function loadScripts(urls, length, success){ 
    if(length > 0){ 
     script = document.createElement("SCRIPT"); 
     script.src = urls[length-1]; 
     console.log(); 
     script.onload = function() { 
      console.log('%c Script: ' + urls[length-1] + ' loaded!', 'color: #4CAF50'); 
      loadScripts(urls, length-1, success);    
     }; 
     document.getElementsByTagName("head")[0].appendChild(script); 
    } 
    else 
     if(success) 
      success(); 
} 

用法：

urls = ['https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js', 
    'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js', 
    'http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js' 
    ]; 

loadScripts(urls, urls.length, function(){ 
    /* Jquery and other codes that depends on other libraries here */ 

}); 

---

該功能是用於智能CSS 異步負載：

function loadLinks(urls, length, success){ 
    if(length > 0){ 
     link = document.createElement("LINK"); 
     link.href = urls[length-1]; 
     link.rel = 'stylesheet'; 
     link.onload = function() { 
      console.log('%c link: ' + urls[length-1] + ' loaded!', 'color: #4CAF50'); 
      loadLinks(urls, length-1);    
     }; 
     document.getElementsByTagName("head")[0].appendChild(link); 
    } 
    else 
     if(success) 
      success(); 
} 

用法：

links = [ 
     'https://www.amirforsati.ir/css/styles.css', 
     'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css', 
     'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css' 
     ]; 
loadLinks(links, links.length, function(){}); 

---

您可以使用CSS和加載CSS和JS異步javascript函數。在異步加載的文件中使用此代碼：

<script async src="js/scripts.js"></script>