異步JS加載頭

我需要異步加載腳本到頁面上。我正在使用createElement方法在頭部動態插入腳本標記。發生的是首先加載頁面源代碼。完成後，頭部包含的所有元素將並行加載。一旦這一切都加載，我動態添加的腳本加載。異步JS加載頭

這在邏輯上是有道理的，但我所尋找的是一種可以加速我的動態腳本加載的方式。我仍然希望它是異步的（不想做document.write），但如果這個腳本可以與head元素的其他腳本並行加載，我們仍然會喜歡它。任何方法可以讓我得到這個工作

感謝

2011-07-13 Sparsh Gupta

把JavaScript的幾行頂部創建動態腳本標籤。

<script> 
var script = document.createElement("script"); 
    script.src = "yourfile.js"; 
    script.async = true; //asynchronous 
    document.getElementsByTagName("head")[0].appendChild(script); 
</script>

其他辦法看看這個鏈接：http://friendlybit.com/js/lazy-loading-asyncronous-javascript/

來源

2011-07-13 17:58:17 amosrivera

我正是這樣做，但內頭。你是否建議它在頭頂上做？我不認爲這將是有效的HTML，它會異步地跨瀏覽器工作嗎？ –

我剛剛瞭解你正在嘗試做什麼，更新了該答案 – amosrivera

+1文章是必讀文章。 – Eddie

你可以，如果你使用HTML5屬性async添加到script元素。這是最簡單的方法，無論您在何處加載（但不是最兼容的）。只需要清楚，即使上面提供的代碼僅在您使用HTML5時纔有效。問題是，首先你不必經歷所有添加這樣的腳本的麻煩。

<script src="/path/to/your/js/here" async></script>

還要注意的是XHTML不允許屬性最小化，所以在XHTML，你必須使用

<script src="/path/to/your/js/here" async="async"></script>

而且，你有一個defer屬性，直到該文件已加載會推遲的JavaScript解析，這也可以用作defer="defer"，這與我使用async顯示示例腳本包含的方式相同。 async和defer標籤都可以在相同的腳本元素中使用。

另外請注意，這些屬性只能被添加到非腳本文件，而不是一個內嵌的腳本，這意味着你不能使用async和defer如果你不使用src屬性。

希望有幫助！ :)

來源

2014-02-19 08:29:45 artfuldev

回答

相關問題