加載頁面後加載腳本？

是否有可能時，頁面的其餘部分加載到加載某些腳本像加載頁面後加載腳本？

<script type="text/javascript" src="somescript.js"></script>

？

想象一下，我有幾個像這樣的大型腳本文件，當頁面加載時不需要。例如。我使用的Google地圖API僅在單擊按鈕時使用（所以不能在頁面加載時使用）。

在我處理所有腳本標記之前，是否可以先加載頁面的其餘部分？

來源

2011-03-30 matt

若他們列在頭部，但如果您使用類似yepnope {http://yepnopejs.com/}的內容，則只有在需要時才能加載它們。 – idbentley 2011-03-30 19:10:34

在jQuery中你的文檔準備

$.getScript("somescript.js", function(){ 
    alert("Script loaded and executed."); 
});

來源

2011-03-30 19:11:38 slandau

我學到了一個有用的功能！ – Miron 2017-07-28 07:20:02

使用jquery的getScript加入方法可do this！或者試着簡單地把這個腳本放在頁面的最後？

來源

2011-03-30 19:11:40

是的，這可以通過從代碼動態注入JavaScript文件來實現。有很多庫你可以使用：RequireJS，HeadJS等。最近我發現this文件，它比較了大量的JavaScript加載器庫。

來源

2011-03-30 19:15:03

是的，這是完全可能的。將onLoad="foo();"事件添加到<body>標記，並讓它調用腳本。你需要將你的外部JS包裝在一個函數中，並執行如下操作：

//EXTERNAL JS (jsstuff.js) 

function Mojo() { 
    document.getElementById('snacks').style.visibility = "visible"; 
    alert("we are victorious!"); 
} 

//YOUR HTML 

<html> 
    <head> 
     <script type='text/javascript'></script> 
    </head> 
    <body onLoad='Mojo();'> 
     <div id='snacks'> 
      <img src='bigdarnimage.png'> 
     </div> 
    </body> 
</html>

來源

2011-03-30 19:16:00

這是可能的。我在AJAX密集型網站上做了類似的事情，但我正在加載Google Charts API。以下是我在頁面上點擊按鈕時用於加載Google Charts API的代碼。

function loadGoogleChartsAPI() { 
    var script = document.createElement("script"); 
    // This script has a callback function that will run when the script has 
    // finished loading. 
    script.src = "http://www.google.com/jsapi?callback=loadGraphs"; 
    script.type = "text/javascript"; 
    document.getElementsByTagName("head")[0].appendChild(script); 
} 

function loadGraphs() { 
    // Add callback function here. 
}

這使用了一個回調函數，該函數將在加載腳本時運行。

來源

2011-03-30 19:22:46 smfoote

地圖確實：https：//developers.google.com/loader/ – 2013-09-20 03:30:58

沒有人提到這些？

$(window).load(function(){ 
    // do something 
});

或

$(window).bind("load", function() { 
    // do something 
});

來源

2014-01-29 10:49:27 laike9m

簡單，你可以添加到該腳本文件defer參數

<script src="pathToJs" defer></script>

，您可以檢查this問題以及

來源

2015-08-11 22:40:46 nikoss

不，這是錯誤的。'async'參數指定腳本在準備就緒時執行，無論頁面加載的程度如何。 '延期'可能是你在找什麼。 – 2017-04-05 09:06:03

感謝您修復@AlexHolsgrove – nikoss 2017-04-05 18:32:46

$(document).ready(function() { 
    var ss = document.createElement("script"); 
    ss.src = "somescript.js"; 
    ss.type = "text/javascript"; 
    document.getElementsByTagName("head")[0].appendChild(ss); 
});

來源

2016-07-05 04:20:22

歡迎來到SO :)最好向您發佈的代碼添加一個解釋作爲答案，以便它可以幫助訪問者理解爲什麼這是一個很好的答案。 – abarisone 2016-07-05 05:49:56

-1

要只是允許頁面顯示加載腳本之前，使用async屬性：

<script src="//url/to/script.js" async></script>

隱藏在瀏覽器中加載微調，頁面加載完成後腳本標籤附加：

<script> 
document.addEventListener('DOMContentLoaded', function() { 
    var script = document.createElement('script'); 
    script.src = '//url/to/script.js'; 
    document.getElementsByTagName('body')[0].appendChild(script); 
}); 
</script>

來源

2018-01-28 12:08:36 danijar

加載頁面後加載腳本？

回答

相關問題