在onReady之後，Javascript加載外部框架

通常，您的HTML源代碼的head元素中包含所有框架（腳本和css），並且在呈現頁面時將加載它們。例如我想加載jQuery和自舉它會是這個樣子：在onReady之後，Javascript加載外部框架

<html> 
    <head> 
    <script src="jquery.min.js"></script> 
    <script src="bootstrap.min.js"></script> 
    <link href="jquery.min.css"\> 
    <link href="bootstrap.min.css"\> 
    </head> 
</html>

但是想象一下，你只是jQuery的從一開始加載的情況，並要執行像點擊一個按鈕，一個動作，需要一些框架像引導程序提供的功能一樣，它們需要在點擊後立即加載。

在我的理解中，這聽起來並不像聽起來那麼容易，因爲需要在已經渲染邊後加載的框架需要執行OnReady調用。有沒有簡單的方法來實現這一點？

親切的問候，馬呂斯

來源

2017-04-04 marius

最好的做法是對腳本在去不在頭部 –

您可以手動觸發這些呼叫，如$（document）.trigger（'ready'）' –

將視圖/頁面需要的文件打包到一個包中並加載？使用'RequireJs'會有幫助嗎？有沒有具體的問題？或者你可以寫一個例子來證明你的問題？ – Nope

「想象一下，你只是jQuery的從一開始加載的情況下，你要像點擊一個按鈕進行操作，需要一些框架的功能喜歡的事，引導報價，他們需要在點擊後立即加載。「

你所描述的是依賴關係的lazy loading。

RequireJS做得很好。

來源

2017-04-04 12:40:43

如果你正在考慮這樣做是爲了加快用戶的頁面加載性能，你可以簡單地使用標籤的異步屬性，像這樣：

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

瞭解更多關於異步加載在https://css-tricks.com/thinking-async/

如果您有其他原因加載JS經過一定的事件，然後用下面的辦法：

function loadJavaScript(url) 
{ 
    var s = document.createElement('script'); 
    s.setAttribute('src', url); 
    s.setAttribute('async',true); 
    document.head.appendChild(s); 
}

你可以傳遞的地址該腳本loadJavaScript('https://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojo/dojo.js')

UPDATE

使用onload句柄調用一個函數時，腳本加載：

$(document).ready(function() { 
 
\t $('#test').click(function() { 
 
    \t console.log("oO"); 
 
    loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 
    loadJavaScript('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.js',function(){ 
 
    $('.selectpicker').selectpicker('refresh'); 
 
    }); 
 
    }); 
 
}); 
 

 

 
function loadCss(url,fn) { 
 
    var link = document.createElement("link"); 
 
    link.type = "text/css"; 
 
    link.rel = "stylesheet"; 
 
    link.href = url; 
 
    document.getElementsByTagName("head")[0].appendChild(link); 
 
} 
 

 
function loadJavaScript(url) 
 
{ 
 
    var s = document.createElement('script'); 
 
    s.setAttribute('src', url); 
 
    s.setAttribute('async',false); 
 
    if(typeof(fn) == "function") 
 
    { 
 
     fn(); 
 
    } 
 
    document.head.appendChild(s); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="test" type="button" class="btn btn-primary">Basic</button> 
 
<select class="selectpicker"> 
 
<option>1</option> 
 
</select>

來源

2017-04-04 12:43:44

嘿，感謝您的快速答案，不幸的是這不是爲我工作，我做了一個小測試用例：https://jsfiddle.net/uvyetrcb/1/ – marius

@marius我得到你的關注，所以在那種情況下，你將不得不使用onload處理程序讓我爲您更新答案。 –

@marius希望更新可以幫助你。 –

在onReady之後，Javascript加載外部框架

回答

相關問題