javascript - 延迟加载 addthis 脚本? (或延迟加载依赖于已触发事件的外部 js 内容)

标签 javascript optimization widget dom-events

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

由于 DOMContentLoaded 事件已经触发,因此小部件无法正确呈现。怎么办?

我可以只使用脚本标记(速度较慢)...或者我可以触发(以跨浏览器的方式)DOMContentLoaded(或等效)事件吗?我觉得这可能是不可能的,因为我相信(像 jQuery 一样)内容就绪事件有多个测试,因此必须发生多个模拟事件。

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

编辑: 因为问题的第一个答案似乎没有捕获我的问题的重点,所以我想澄清一下情况。

这是关于一个特定的问题。我不是在寻找另一个延迟加载脚本或检查某些依赖项是否已加载脚本。 具体这个问题处理

  1. 您不使用的外部小部件 控制并可能会或可能不会 被混淆
  2. 延迟负载 外部小部件,直到他们 需要或至少,直到 基本上在其他一切之后 已加载,包括其他延迟元素
  3. b/c 的方法 小部件已编写,排除 现有的,典型的延迟加载 范式

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

**我的锤头测试和个人经验表明,这将是我在这种情况下的节省。

最佳答案

最简单的解决方案是在将 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 配置参数的更多信息可用 here .

关于javascript - 延迟加载 addthis 脚本? (或延迟加载依赖于已触发事件的外部 js 内容),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/942921/

相关文章:

javascript - Bootstrap 卡不能一直 flex 到全宽

memory - 为什么全局内存版本比我的 CUDA 代码中的常量内存更快?

math - 计算矩阵的 k 次幂的迹

c - 什么更好 : function or define

android - 实现类似 HomeScreen 的可水平滚动的小部件?

python - 如果选择全部并按下删除或退格按钮,则条目 Tkinter 不允许删除数据

javascript - 尝试引用 TypeScript 步骤定义代码时 WebStorm 中的 "Undefined step reference"

javascript - $.getScript 第二次可以工作吗?

javascript - AmCharts 标记颜色为负时

c++ - QUiLoader 只创建自定义小部件的基类