暫停頁面執行，直到加載腳本

我已經停留了幾天這段代碼，我想延遲執行targetObj.innerHTML，直到加載了所有的JavaScript文件（可以有多個，我實際上需要檢查他們是否加載，而不是標題添加），在此先感謝傢伙！暫停頁面執行，直到加載腳本

function addScriptTag(src) { 
    var newScript; 
    var loadFunc = function() 
    { 
     $.holdReady(false); 
    }; 
    newScript = document.createElement('script'); 
    newScript.setAttribute('type','text/javascript'); 
    newScript.setAttribute('src',src); 

    //Other browsers trigger this one 
    if (newScript.addEventListener) 
    newScript.addEventListener('load', loadFunc, false); 

    document.getElementsByTagName('head')[0].appendChild(newScript); 
} 

function parseScript(_source) { 
    var source = _source; 
    var scripts = source.match(/<script[^>]*src=[^>]*>/g); 
    if (scripts) { 
    for (var i = 0; i < scripts.length; i++) { 
     src = scripts[i].match(/src=("([^"]*)"|'([^']*)')/); 
     src = src[2] || src[3]; 
     if (src) { 
      addScriptTag(src); 
     } 
    } 
    } 
    var scripts = new Array(); 

    return source; 
} 

function ajax_showContent(divId,ajaxIndex,url,callbackOnComplete) 
{ 
     $.holdReady(true); 
    var targetObj = document.getElementById(divId); 
    targetObj.innerHTML = parseScript(dynamicContent_ajaxObjects[ajaxIndex].response);

來源

2012-12-17 user1841964

Ehh，'$（window）.load（fn）'？ –

除非你使用AJAX加載，否則這不會發生？ – Blazemonger

這會有點改變，但你可能看到的是一個遞歸setTimeout循環。發送回撥到parseScript，而不是設置targetObj.innerHTML = ...，而是設置targetObj.innerHTML。然後，在parseScript中，使用window.setTimeout每10毫秒遞歸調用一次函數。

每次調用此內部函數時都會檢查腳本是否已執行。（也許通過擁有一個全局變量來保存要執行的腳本的數量，並從每個addScriptTag> loadFunc中減去它，一旦達到0，就執行了所有的腳本。）如果它們還沒有被執行，函數只是在window.setTimeout中再次調用自己。如果他們有，你的回調被執行 - 將所需的值傳回給它。

像這樣（未經）：

(function() { 
    var scriptCount = 0; 

    function addScriptTag(src) { 
     var newScript; 
     var loadFunc = function() { 
      scriptCount--; 
      $.holdReady(false); 
     }; 
     newScript = document.createElement('script'); 
     newScript.setAttribute('type', 'text/javascript'); 
     newScript.setAttribute('src', src); 

     //Other browsers trigger this one 
     if (newScript.addEventListener) newScript.addEventListener('load', loadFunc, false); 

     document.getElementsByTagName('head')[0].appendChild(newScript); 
    } 

    function parseScript(_source, callback) { 
     var source = _source; 
     var scripts = source.match(/<script[^>]*src=[^>]*>/g); 
     if (scripts) { 
      scriptCount = scripts.length; 
      for (var i = 0; i < scripts.length; i++) { 
       src = scripts[i].match(/src=("([^"]*)"|'([^']*)')/); 
       src = src[2] || src[3]; 
       if (src) { 
        addScriptTag(src); 
       } 
      } 
      var wait = function() { 
       scriptCount > 0 ? window.setTimeout(wait, 10) : callback(source); 
      }; 
     } 
     else { 
      callback(""); 
     } 
     var scripts = new Array(); 

     return source; 
    } 



    function ajax_showContent(divId, ajaxIndex, url, callbackOnComplete) { 
     $.holdReady(true); 
     var targetObj = document.getElementById(divId); 
     parseScript(
     dynamicContent_ajaxObjects[ajaxIndex].response, function(value) { 
      targetObj.innerHTML = value; 
     }); 
    } 
})();

...但是，正如指出的那樣，有喜歡的，可能爲你做這樣的事情require.js其他庫。另外，我不確定source是您真正想要返回的位置，因此可能需要進行一些修改。

來源

2012-12-17 15:34:53 Grinn

任何輸入都比沒有人好！謝謝:) – user1841964

@ user1841964我添加了一個代碼示例。 – Grinn

如果要異步加載腳本依賴關係，我會考慮使用類似RequireJS的AMD庫。它將檢查所有腳本是否已加載，並允許您在回調中執行yoru代碼。

來源

2012-12-17 15:20:06

暫停頁面執行，直到加載腳本

回答

相關問題