2013-02-11 28 views
30

Tôi đã thêm số đăng ký async vào HTML bao gồm javascript của mình.
Vì vậy, bây giờ tôi đã:Tải jquery không đồng bộ trước các tập lệnh khác

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

Và làm việc này với tất cả JS Tôi tải, tất cả ngoại trừ jquery.

Nếu tôi thêm async vào jQuery <script>, tất cả các tập lệnh khác phụ thuộc vào jquery đều không hoạt động.

Trong jsfiddle rằng bạn sẽ nhìn thấy vấn đề:
http://jsfiddle.net/uFbdV/

Trong ví dụ tôi đã sử dụng <script> Mycode </script> thay vì bao gồm một file.js bên ngoài, nhưng điều này không làm thay đổi tình hình.

Tôi muốn chạy jQuery bằng trình thu thập không đồng bộ và chạy vài tập lệnh bên ngoài khác không đồng bộ chỉ sau khi jquery được tải.

Có thể?

+0

có thể cần phải sử dụng 'async =" "' thay vì 'async' một mình. ví dụ, mẫu blogger.com của tôi yêu cầu '=" "' – noobninja

Trả lời

20

Tôi muốn chạy jQuery bằng trình thu thập không đồng bộ và chạy một số tập lệnh bên ngoài khác một cách không đồng bộ chỉ sau khi jquery được tải.

Điều đó có nghĩa là gì? Nghe có vẻ giống như bạn muốn tải jQuery trước, sau đó là những thứ khác khi nó được thực hiện. Vì vậy, bạn muốn tải nó đồng bộ. Nếu bạn vẫn muốn sử dụng cách async, bạn có thể xác định hàm onload để tiếp tục tải những thứ khác khi jQuery đã sẵn sàng. Hoặc bạn có thể sử dụng defer. Cả hai giải pháp này được giải thích tại đây: https://davidwalsh.name/html5-async

+10

Tôi muốn tải tất cả các tập lệnh không đồng bộ, nhưng chạy chúng theo đúng thứ tự. –

+0

Tôi đã mở rộng câu trả lời của mình với một số suy nghĩ về cách thực hiện điều đó. –

+0

vì vậy bạn không cần phải thực hiện bất kỳ điều gì trong hàm myInit()? – csandreas1

12

Đây có thể là những gì bạn đang tìm kiếm:
http://www.yterium.net/jQl-an-asynchronous-jQuery-Loader - jQl Trình tải jQuery không đồng bộ.

Nó tải không đồng bộ jQuery mà không ngăn chặn các thành phần khác:

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

jQl tự động bắt tất cả jQuery().ready() cuộc gọi, vì vậy bạn có thể viết:

<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 sẽ xếp hàng các cuộc gọi chức năng, và thực hiện chúng như ngay khi jQuery được tải và DOM đã sẵn sàng, vì chúng sẽ được thực thi theo cách thông thường.

11

Đây là một tình huống tuyệt vời cho defer:

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

Cả các thẻ này sẽ chặn rendering. Trình duyệt có thể tải xuống song song jquery.jscustom.js. Nó sẽ thực thi jquery.js ngay khi nó đã được tải xuống và DOM đã được tải và custom.js sẽ thực thi sau đó.

Đáng buồn thay, có một vài vấn đề:

  • Bạn không thể sử dụng defer thuộc tính cho các kịch bản nội tuyến.
  • IE < 10 đã được ghi lại để gây ra tập lệnh với defer đến unexpectedly interleave their execution.
  • Tôi không thể tìm thấy bất kỳ thông số kỹ thuật nào nói rằng tập lệnh có thứ tự defer được thực hiện theo thứ tự, chỉ là chúng được thực hiện sau khi tải DOM.
-1
<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> 

tìm thấy nó tôi đã khó khăn với vô bootstrap đôi khi trước jquery tại np hy vọng nó giúp những người khác tôi đặt script này vào đầu nhưng đưa ra một lỗi không thể appendChild bây giờ nó trước /body và kiểm tra công trình cho tất cả các trình duyệt tôi đã thử script không đồng bộ nhưng không có sự kiện cho tôi biết khi tải xuống kết thúc và một số lần bootstrap được tải trước jquery và ngược lại vì bootstrap phụ thuộc vào jquery tôi đã tải jquery và sau đó bắt đầu.210 tải bootstrap bây giờ tôi sẽ thêm dự phòng

cố định nó

bây giờ nó kiểm tra mà JQ nạp

và chỉ sau đó tải khác

ok bây giờ bản sao của nó dán

0

Chức năng này thông minh cho javascript tải không đồng bộ:

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(); 
} 

Cách sử dụng:

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

}); 

Chức năng này thông minh cho css không đồng bộ tải:

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(); 
} 

Cách sử dụng:

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(){}); 

Bạn có thể sử dụng cả hai css và chức năng javascript để tải css và js không đồng bộ. sử dụng mã này trong tệp được tải không đồng bộ như:

<script async src="js/scripts.js"></script> 
Các vấn đề liên quan