延遲加載第三方javascript

8

您可以附加到頁面的onload事件，一旦觸發，您可以動態地插入對文件的引用。

例如：

function loaded(){ 
    var el = document.createElement("script"); 
    el.src = "somefile.js"; 
    el.type="text/javascript"; 
    document.getElementsByTagName("head")[0].appendChild(el); 
}

來源

2010-07-24 05:08:25

3

一個簡單的方法是將它們加載到html頁面的末尾。

如果你想確保像圖片這樣的內容先載入，加上一堆跨瀏覽器的問題，平滑啓動，jQuery庫使$(window).load()和$.getScript()這很容易。

$(window).load(function() { 
    $.getScript('your_3rd_party-script.js'); 
});

jQuery不是所有問題的答案，但它提供了一些很好的抽象。例如，您將獲得自動IE緩存清除（如果您需要），並且不必擔心直接DOM操作方法的瀏覽器特定問題。

來源

2010-07-24 05:06:01

+0

+1「jQuery不是所有問題的答案......」 – TheHippo 2010-07-24 11:30:10

2

我必須爲我自己的網站做到這一點，我在這裏記錄的是：
http://tech.bluesmoon.info/2010/01/handling-documentwrite-in-dynamic.html

總結一下，有以下幾種類型的第三方腳本來處理：

那些與頁面很好地玩，或者根本不操縱DOM，創建或自己的DOM節點，或者讓你傳入一個DOM節點的ID，在這個DOM節點中它的所有內容都會去，並等到DOM節點出現在DOM中。

您不必擔心這些腳本。您可以安全地異步加載它們，或者在onload或DOMContentReady事件觸發後加載它們。我個人更喜歡異步加載它們。
那些使用document.write添加內容到頁面。這些腳本很煩人，但是您通過將document.write別名爲innerHTML附加到特定DIV的屬性來處理它們。我的文章談到這一點。
這些絕對必須在onload之前在頁面上觸發，通常是測量onload啓動所用時間的腳本。系統會要求您使用常規腳本節點加載這些腳本，但是，請考慮一個衡量onload的腳本實際上並不會延遲onload。出於這個原因，我會說異步加載這樣的腳本，但將異步加載器放在頁面頂部（在HEAD）部分。這使它有機會在加載火災之前加載。

另外，還要注意一個警告，異步添加腳本仍然可以阻止onload事件，如果他們加入到之前的onload發射的DOM，但他們不會阻止加載任何其他內容。

來源

2010-07-24 05:29:26 bluesmoon

0

是，jQuery有一個準備的方法來處理這樣的：http://www.learningjquery.com/2006/09/introducing-document-ready

來源

2010-07-24 06:00:14 CarneyCode

1

可以使用defer屬性，直到頁面的其餘部分被加載，並準備將停止腳本加載和執行：

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

來源

2010-07-24 20:42:46 LDJ

+0

是不是隻有IE？ – bluesmoon 2010-07-24 21:02:39

+0

是的，它只支持IE – WSK 2011-10-14 18:52:29

延遲加載第三方javascript

回答

相關問題