動態加載JavaScript，檢查所有javascript是否加載

我仍然通過製作自己的加載程序來學習;這裏是我的進步：動態加載JavaScript，檢查所有javascript是否加載

<!DOCTYPE html> 
<html> 
<head> 
    <title>test</title> 

    (function($){ 

     $.plugin = { 

      loadJS: function(src, onload, onerror){ 
       var script = document.createElement("script"); 
       script.type = "text/javascript"; 
       script.src = src; 
       script.onload = onload; 
       script.onerror = onerror; 
       script.onreadystatechange = function() { 
        var state = this.readyState; 
        if (state === 'loaded' || state === 'complete') { 
         script.onreadystatechange = null; 
         onload(); 
        } 
       }; 
       document.body.appendChild(script); 
      }, 

      loader: function(o) { 
       var loaded = ({js:[],css:[]}); 
       // http://www.crockford.com/javascript/private.html 
       var that = this; 
       var phase = 0; 

       $.each(o["js"], function(key,src) { 
        that.loadJS(src, 
        function(){ 
         loaded['js'].push(src); 
        }); 
       }); 

       console.log(loaded['js'].length) 

       // IF JS ALL LOADED, this is the main problem 
       if (loaded['js'].length == o["js"].length) { 
        alert('problem solved') 
        that.loadJS(o["script"]); 
       }; 
      } 
     }; 
    })(jQuery); 
    </script> 
</head> 
<body> 
    <script> 
    $(document).ready(function() { 
     $.plugin.loader({ 
      js: [ 
       '1.js', // async 
       '2.js', // async 
       '3.js', // async 
       '4.js' // async 
      ], 
      script: '5.js', // after js loaded 
      debug: 1 
     });   
    }); 
    </script> 
</body> 
</html>

問題是我仍然沒有得到如何在JS工作。上述同樣的它會隨機加載JS我作爲它的異步*承擔一切alert('this is x.js loaded')內1-5.js

像

// check goes randomly here 
1.js or 1 js loaded 
3.js 2 js loaded 
2.js 3 js loaded 
4.js 4 js loaded 
// it should be here

所以邏輯是，當我所有的JS是負載if (loaded['js'].length == o["js"].length) {alert('problem solved')};應該工作。但它並不以某種方式附加到事件上。

如何檢查我的所有js是否已加載？

來源

2011-08-10 Adam Ramadhan

這僅僅是一個學習JS的項目，或者你打算將它用於生產代碼？您可能想要查看現有的腳本加載器。 –

學習，但我會稍後在學習其他腳本加載器以符合我們的需要後，將其用於生產，但我意識到很多事情沒有像檢查相同的域等執行的東西，但我肯定不好，屆時會好起來。 :) –

看起來像你的檢查，看看他們是否都加載正在運行在加載函數的末尾，所以它會立即運行的異步調用已經開始。您需要將該檢查部分移入傳遞給.each函數的回調函數中。

來源

2011-08-10 22:14:57

啊是的！我怎麼能忘記這一個。 –

我遇到了問題IE 6歲以下的大的JavaScript重應用，在那裏偶爾外部腳本加載在沒有任何可辨識的網絡故障中斷，所以最後我做

<script src="sourcefile-1.js"></script> 
... 
<script src="sourcefile-n.js"></script> 
<script src="last-loaded.js"></script> 
<body onload="if(!window.allLoaded){/*reload*/}">...</body>

其中last-loaded.js只是做

window.allLoaded = true;

如果在幾次嘗試後重新加載沒有解決問題，重裝代碼將重定向到錯誤頁面。

這不是動態加載程序的問題，但類似的方法應該與動態加載程序一起工作，只要你能夠識別一個點，之後所有的外部代碼應該已經加載，並且你可以運行一個非常簡單的內聯腳本點。

來源

2011-08-10 20:24:11

動態加載JavaScript，檢查所有javascript是否加載

回答

相關問題