延遲加載addthis腳本？ （或延遲加載外部js內容取決於已觸發的事件）

Question

我想讓addthis小部件可供我的用戶使用，但我想延遲加載它，以便儘可能快地加載我的頁面。但是，通過腳本標記嘗試後，然後通過我的延遲加載方法，它似乎只能通過腳本標記工作。在混淆代碼中，我看到了一些看起來像依賴DOMContentLoaded事件的東西（至少在Firefox中）。

由於DOMContentLoaded事件已經觸發，所以小部件無法正確呈現。該怎麼辦？

我可以只使用腳本標記（較慢）...或者我可以（通過跨瀏覽器方式）DOMContentLoaded（或等效）事件？我有一種感覺，這可能是不可能的B/C我相信（如jQuery）內容準備事件有多個測試，所以多個模擬事件將不得不發生。

儘管如此，這是一個有趣的問題b/c我已經看到一些小部件現在假設你通過靜態腳本標籤包含了他們的東西。如果他們編寫的代碼對於速度方面的開發人員更有用，那將是非常好的，但在那之前，有沒有解決方法？和/或我的任何假設是否錯誤？

編輯： 因爲這個問題的第一個答案似乎錯過了我的問題，我想澄清的情況。

這是關於一個特定的問題。我不在尋找另一個懶惰的加載腳本，或者檢查是否有一些依賴被加載腳本。 具體這個問題

1. ，你不 擁有控制權，並可能會或可能不會 被混淆
2. 延遲 外部部件的負載，直到他們 需要或至少外部部件交易，直到 一切基本上之後 已經加載包括其它遞延元件
3. b /所述如何 的c中的窗口小部件是書面的，排除了 現有的，典型的懶加載 範式

雖然很深奧，我已經看到了一對夫婦的小部件發生 - 在Widget開發者認爲你只是願意在的底部在另一個腳本標籤扔頁。我希望能夠節省500-1000毫秒**，儘管雅虎，谷歌和亞馬遜的衆多研究表明它對用戶的體驗非常重要。

**我用錘頭和個人經驗測試表明，這將是我在這種情況下的節省。

Answer 1

此代碼解決了這個問題，節省了加載時間，我正在尋找。

閱讀了這個post之後，關於大多數當前的js庫如何實現dom加載事件的測試。我花了一段時間處理混淆代碼，並且我可以確定addthis使用提到的doscroll方法，定時器和DOMContentLoaded事件的組合來適用於各種瀏覽器。由於僅依賴於DOMContentloaded事件時，這些瀏覽器將需要下面的代碼反正：

if(document.createEvent) { 
var evt = document.createEvent("MutationEvents"); 
evt.initMutationEvent("DOMContentLoaded", true, true, document, "", "", "", 0); 
document.dispatchEvent(evt); 
} 

，其餘依賴於某些屬性的存在計時器測試，我只有適應這一情況下能夠延遲加載這個外部的JS內容而不是使用靜態腳本標籤，從而節省了我所希望的時間。 :)

Answer 2

編輯：如果您的目標僅僅是讓您的其他場景先載入，請嘗試將<script>標籤貼近頁面底部。它仍然能夠捕獲DOMContentLoaded，並且之前的內容將在腳本之前加載。

原文：

除了對DOMContentLoaded負荷，你可以有，如果某一變量被設置爲true加載它。例如

var isDOMContentLoaded = false; 

document.addEventListener("DOMContentLoaded",function() { isDOMContentLoaded = true; }, false); 

則響應添加到其它腳本文件

if (isDOMContentLoaded) loadThisScript(); 

編輯點評：

加載腳本，並運行該DOMContentLoaded聽衆火災的功能。 （請參閱腳本，如果您不確定調用哪個函數）。

例如

var timerID; 
var iteration=0; 

function checkAndLoad() { 
    if (typeof loadThisScript != "undefined") { 
     clearInterval(timerID); 
     loadThisScript(); 
    } 
    iteration++; 
    if (iteration > 59) clearInterval(timerID); 
} 

var extScript = document.createElement("script"); 
extScript.setAttribute("src",scriptSrcHere); 
document.head.appendChild(extScript); 

timerID = setInterval(checkAndLoad,1000); 

以上會嘗試一次60秒的第二次檢查，如果你需要的功能是可用的，並且，如果是這樣，運行它

Answer 3

最簡單的解決方案是將參數domready設置爲1時，將addthis腳本嵌入到頁面中。這裏有一個例子：

<script type="text/javascript" 
src="http://s7.addthis.com/js/250/addthis_widget.js#username=addthis&domready=1"> 
</script> 

我已經測試了IE，火狐，Chrome和Safari，以及所有工作得很好。有關addthis配置參數的更多信息，請參閱here。