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

Question

我希望為我的用戶提供addthis小部件，但我想延遲加載它以便我的頁面盡快加載。 但是，在通過腳本標記然后通過我的延遲加載方法嘗試它之后，它似乎只能通過腳本標記工作。 在混淆的代碼中，我看到一些看起來像是依賴於DOMContentLoaded事件的東西（至少對於Firefox而言）。

由於DOMContentLoaded事件已經觸發，因此窗口小部件無法正確呈現。 該怎么辦？

我可以使用腳本標記（較慢）...或者我可以觸發（以交叉瀏覽器方式）DOMContentLoaded（或等效）事件？ 我有一種感覺，這可能是不可能的，因為我相信（像jQuery）有內容就緒事件的多個測試，因此必須發生多個模擬事件。

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

編輯：因為問題的第一個答案似乎忽略了我的問題，我想澄清一下情況。

這是一個特定的問題。 我不是在尋找另一個延遲加載腳本或檢查是否有一些依賴項是加載腳本。 特別是這個問題涉及

1. 您無法控制的外部小部件，可能會也可能不會被混淆
2. 延遲外部小部件的負載，直到需要它們為止，或至少在其他所有負載包括其他延遲元素之后大致延遲
3. 關於小部件編寫方式的b / c，排除了現有的典型延遲加載范例

雖然它是深奧的，但我已經看到它發生在一些小部件 - 小部件開發人員認為你只是願意在頁面底部引入另一個腳本標記。 雖然雅虎，谷歌和亞馬遜的大量研究表明它對用戶的體驗很重要，但我希望能節省500到1000毫秒的時間。

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

Answer 1

最簡單的解決方案是在將addthis腳本嵌入頁面時將參數domready設置為1。 這是一個例子：

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

我已經在IE，Firefox，Chrome和Safari上進行了測試，一切正常。 有關addthis配置參數的更多信息，請參見此處 。

Answer 2

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

在閱讀這篇文章后，關於大多數當前的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 3

編輯：如果目標只是讓您的其他競爭加載，請嘗試將<script>標記放在頁面底部附近。 它仍然能夠捕獲DOMContentLoaded，並且之前的內容將在腳本之前加載。

原版的：

除了在DOMContentLoaded上加載之外，如果將某個var設置為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 4

AddThis有一節介紹如何異步加載他們的工具 。

目前“最佳”解決方案：

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=[YOUR PROFILE ID]" async="async"></script>