通過html標籤數據屬性動態加載js，css文件

我們能否實現動態加載js，css等文件的過程？通過html標籤數據屬性動態加載js，css文件

通過從html標籤數據屬性獲取所有需要的信息（我們必須加載的）？

例如：

<html> 
    <head> 
     <title>Our app</title> 
    </head> 
    <body data-load-css="style"> 
     <div class="all" data-load-js="jquery|jqueryui" data-load-js-type="async"> 
      <div class="header" data-load-js="main"> 
       Header 
      </div> 
      <div class="body" data-load-js="body"> 
       Body 
       <div class="some-tipsy" data-load-css="tipsy"></div> 
      </div> 
      <div class="footer" data-load-js="other"> 
       Footer 
       <div class="some-other" data-load-css="other"></div> 
      </div> 
     </div> 
     <script> 
      // our js app to load dynamically js, css 
     </script> 
    </body> 
</html>

所以，也許你有一些想法如何以最好的方式做到這一點？具有最佳的性能和靈活性。

或者我只需要使用require js，不要擔心一些「新事物」？如果只需要js，那麼這個js插件怎麼做最好？要最動態地加載所有東西？

如何解決js異步問題，推遲loding？某些腳本必須按特定順序加載。

這是我持續2當前問題的版本：https://stackoverflow.com/questions/34413940/dynamically-load-js-files-by-html-data-attr-dependencies

來源

2015-12-21 Vital

但是，如果您導航離開，然後再次返回頁面，您是否認爲這會超載？它將再次加載相同的庫和文件。 – Jai

Jai提出了一個很好的解決方案，但需要更多的上下文描述... – MTroy

在這一點上我沒有很大的知識。所以，我不想通過創建主要的js網站邏輯來犯一些嚴重的錯誤。每個想法，這裏粘貼的一些解決方案，對我來說都很有趣。 – Vital

以下是幾種方法來動態加載腳本：

的Javascript：編寫一個定製的負載功能。
jQuery：$.getScript()。對於css，請參閱SO-Post。
require.js：要求（MODULENAME）
ECMA 6：import

以下是一個純粹的javascript函數動態加載腳本：

function(url, callback) { 
    var scripts = utils.getLoadedScripts(); // Read all scripts and push names in array. 
    var lastIndex = url.lastIndexOf("/"); 
    var isLoaded = false; 
    scripts.forEach(function(row, index) { 
    if (row == url.substring(lastIndex + 1)) { 
     isLoaded = true; 
     return; 
    } 
    }); 
    if (!isLoaded) { 
    //$(".reveal").addClass("loading"); 
    // Adding the script tag to the head as suggested before 
    var head = document.getElementsByTagName('head')[0]; 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = url; 
    script.name = "url"; 

    // Then bind the event to the callback function. 
    // There are several events for cross browser compatibility. 
    script.onreadystatechange = callback; 
    script.onload = callback; 

    // Fire the loading 
    head.appendChild(script); 
    } 
};

來源

2015-12-21 07:54:16 Rajesh

謝謝，但會更大，如果你有一些確切的代碼來解決我的主要問題。非常抽象，簡單） – Vital

您可以查看以下[JSFiddle]（https://jsfiddle.net/RajeshDixit/pk7v1pmb/）以供參考。希望它可以幫助 – Rajesh

你可以利用web workers你案件。您可以異步處理代碼以異步執行任務。

主要腳本：

var worker = new Worker('doWork.js'); 

worker.addEventListener('message', function(e) { 
    console.log('Worker said: ', e.data); 
}, false); 

worker.postMessage(); // Starts the worker to work;

doWork.js中（工人）：

self.addEventListener('message', function(e) { 
    self.postMessage("Hi, loaded async."); // send the data via postMessage to main script. 
}, false);

那麼，這意味着什麼，你可以把你的邏輯中doWork.js，把腳本異步用戶的屏幕。

來源

2015-12-21 08:09:54 Jai

謝謝。你可以顯示代碼示例，當我們將加載：2個異步js，2個css文件和3個帶有延遲選項的js文件？然後在主要的js應用邏輯中，我有可能從所有加載的腳本訪問變量？ Js文件必須通過當前頁面上公開的html數據屬性加載。 – Vital

@vital你應該告訴我們你試過了什麼，但是失敗了嗎？只有這樣我們才能幫助你，我只是發佈了一條路徑來做到這一點。 – Jai

下面是更多解釋：http://stackoverflow.com/questions/34413940/dynamically-load-js-files-by-html-data-attr-dependencies – Vital

通過html標籤數據屬性動態加載js，css文件

回答

相關問題