Question

我希望我的用户可以使用addthis窗口小部件，但我想延迟加载它，以便尽快加载我的页面。但是，在通过脚本标记然后通过我的延迟加载方法尝试它之后，它似乎只能通过脚本标记工作。在混淆的代码中，我看到一些看起来像是依赖于DOMContentLoaded事件（至少对于firefox）。

由于DOMContentLoaded事件已经触发，因此窗口小部件无法正确呈现。怎么办？

我可以使用脚本标记（较慢）...或者我可以触发（以交叉浏览器方式）DOMContentLoaded（或等效）事件？我有一种感觉这可能是不可能的b / c我相信（比如jQuery）内容就绪事件有多个测试，因此必须发生多个模拟事件。

尽管如此，这是一个有趣的问题b / c我已经看到一些小部件现在假设你通过静态脚本标签包含他们的东西。如果他们编写的代码对于关注速度的开发人员更有用，那会很好，但在那之前，是否有一个解决方法？和/或我的任何假设是错误的吗？

修改因为问题的第一个答案似乎忽略了我的问题，我想澄清一下情况。

这是一个特定的问题。我不是在寻找另一个延迟加载脚本或检查是否有一些依赖项是加载脚本。具体此问题涉及

你没有的外部小部件有控制权，可能有也可能没有被混淆
延迟了负荷外部小部件，直到他们需要或至少，直到大致在其他一切之后已加载包括其他延期元素
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上测试过，一切正常。有关添加此配置参数的更多信息，请访问here。

Answer 2

此代码解决了问题并节省了我正在寻找的加载时间。

阅读此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 3

修改：如果目标只是首先加载其他竞争对象，请尝试将<script>标记放在页面底部附近。它仍然能够捕获DOMContentLoaded，并且之前的内容将在脚本之前加载。

原件：

除了加载DOMContentLoaded之外，如果将某个var设置为true，则可以加载它。 e.g。

var isDOMContentLoaded = false;

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

然后添加到其他脚本文件

if (isDOMContentLoaded) loadThisScript();

编辑以回应评论：

加载脚本，然后运行DOMContentLoaded侦听器触发的函数。（如果你不确定调用什么函数，读取脚本。）

e.g。

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在http://www.ti.com/general/docs/litabsmultiplefilelist.tsp?literatureNumber=snlu036a中有一节。

当前“最佳”解决方案：

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

懒惰加载addthis脚本？（或延迟加载外部js内容取决于已经触发的事件）

4 个答案:

懒惰加载addthis脚本？ （或延迟加载外部js内容取决于已经触发的事件）

4 个答案:

懒惰加载addthis脚本？（或延迟加载外部js内容取决于已经触发的事件）