實時導入樣式表和JavaScript

我有一個網站，其導航全部通過ajax（使用jQuery）完成;每個頁面都被動態加載到頁面上的一個元素上。雖然我有一個通用樣式表和JS腳本，但每個頁面都有一個頁面特定的樣式表和JS腳本。加載這些頁面特定腳本和樣式表的最有效/最有效的方式是什麼？在頁面加載時，大多數頁面特定的腳本/樣式表將不再需要。只有當用戶（通過ajax）加載特定頁面時才需要頁面的腳本/樣式表。我是否應該在加載頁面時加載每個腳本和樣式表？實時導入樣式表和JavaScript

另一種選擇是在頁面動態加載時簡單地將適當的<link>和<script>元素附加到頭部;然而，他們會被稱爲？另外，如果調用另一個頁面（通過ajax），是否需要刪除<link>和<script>元素？對於腳本，我可以使用jQuery的.getScript()函數。在效率和跨瀏覽器支持方面，最佳方法是什麼？

謝謝！

來源

2014-03-27 Leopold Joy

你看到這個http://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript –

謝謝，但只涉及樣式表，而不是JS文件。 –

JS和CSS是一個時間量，在瀏覽器的緩存（取決於您的服務器的conf以及）

所以，如果你有一個Ajax，只有1 JS包容。你可以

插入這個JS在你家頁面的頁腳（延遲加載;先發制人的思想..更快的第二頁）
帶上包括JS標籤與Ajax響應一起。（沒有什麼複雜的在這裏。瀏覽器發出新的JS調用）
將所有的JS/CSS合併爲一個JS，把它推到首頁head標籤（盯上了性能和緩存）
一旦文件準備好，做類似＃1使用getScript加入（）如你所說

來源

2014-03-27 07:52:36

非常感謝您的回覆！＃1，＃2和＃4沒有解決動態加載CSS的問題，只是JS，對嗎？ CSS文件可以加載到正文或頁腳中嗎？ –

適用於css/js/img –

好吧，太好了！謝謝！ :) –

那麼我知道這樣做的一個方法是RequireJS，，但缺點是所有的JS都需要定義爲AMD。

不知道你是否知道RequireJS的任何內容，但它的一個相當整潔的庫，你可以把它想象成一個依賴注入器，並以異步的方式加載文件。如果你有興趣，你可以檢查自己的文檔：

Intro
CSS

來源

2014-03-27 07:40:59 TheCodeDestroyer

之前我評論，你可以用CSS做什麼。這就是你可以用JS工作：

var script = document.createElement('script'); 
script.src = "path to your src"; 
// load event 
script.onload = function() { 
    //some staff 
}; 
document.head.appendChild(script);

此外，我建議你閱讀這gist。

另一個好的information。

來源

2014-03-27 07:42:16

實時導入樣式表和JavaScript

回答

相關問題