延迟加载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。