9

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

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

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

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

编辑： 因为这个问题的第一个答案似乎错过了我的问题的重点，所以我想澄清一下情况。

这是关于一个特定的问题。我不是在寻找另一个延迟加载脚本或检查是否加载了某些依赖项脚本。具体来说，这个问题涉及

  1. 您无法控制的外部小部件，可能会或可能不会被混淆
  2. 延迟外部小部件的加载，直到需要它们为止，或者至少直到基本上在加载其他所有内容（包括其他延迟元素）之后
  3. b/c 小部件的编写方式，排除了现有的典型延迟加载范例

虽然它很深奥，但我已经看到它发生在几个小部件上 - 小部件开发人员假设您只是愿意在页面底部添加另一个脚本标签。我希望节省这 500-1000 毫秒**，尽管雅虎、谷歌和亚马逊的大量研究表明它对您的用户体验很重要。

**我对锤头和个人经验的测试表明，在这种情况下，这将是我的积蓄。

4

4 回答 4

12

最简单的解决方案是在将 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 配置参数的更多信息，请参见此处。

于 2010-06-15T04:11:24.883 回答
8

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

在阅读了这篇关于大多数当前 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 内容而不是使用静态脚本标签，从而节省了我希望的时间。:)

于 2009-06-03T06:19:02.383 回答
1

编辑：如果目标只是让您的其他内容首先加载，请尝试将<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 秒，以检查您需要的功能是否可用，如果可用，则运行它

于 2009-06-03T04:06:52.083 回答
0

AddThis 有一节介绍如何异步加载他们的工具。

当前的“最佳”解决方案：

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=[YOUR PROFILE ID]" async="async"></script>
于 2019-07-10T13:14:49.870 回答