我希望为我的用户提供addthis小部件,但我想延迟加载它以便我的页面尽快加载.但是,在通过脚本标记然后通过我的延迟加载方法尝试它之后,它似乎只能通过脚本标记工作.在混淆的代码中,我看到一些看起来像是依赖于DOMContentLoaded事件(至少对于firefox).
由于DOMContentLoaded事件已经触发,因此窗口小部件无法正确呈现.该怎么办?
我可以使用脚本标记(较慢)...或者我可以触发(以交叉浏览器方式)DOMContentLoaded(或等效)事件?我有一种感觉这可能是不可能的b/c我相信(像jQuery)有内容就绪事件的多个测试,因此必须发生多个模拟事件.
尽管如此,这是一个有趣的问题b/c我已经看到一些小部件现在假设你通过静态脚本标签包含他们的东西.如果他们编写的代码对于关注速度的开发人员更有用,那会很好,但在那之前,是否有一个解决方法?和/或我的任何假设是错误的?
编辑: 因为问题的第一个答案似乎忽略了我的问题,我想澄清一下情况.
这是一个特定的问题.我不是在寻找另一个延迟加载脚本或检查是否有一些依赖项是加载脚本.特别是这个问题涉及
您无法控制的外部小部件,可能会也可能不会被混淆
延迟外部小部件的负载,直到需要它们为止,或至少在其他所有负载包括其他延迟元素之后大致延迟
关于小部件编写方式的b/c,排除了现有的典型延迟加载范例
虽然它是深奥的,但我已经看到它发生在一些小部件 - 小部件开发人员认为你只是愿意在页面底部引入另一个脚本标记.虽然雅虎,谷歌和亚马逊的大量研究表明它对用户的体验很重要,但我希望能节省500到1000毫秒的时间.
**我用锤头和个人经验测试表明,这将是我在这种情况下的节省.
最简单的解决方案是在将addthis脚本嵌入页面时将参数domready设置为1.这是一个例子:
我已经在IE,Firefox,Chrome和Safari上进行了测试,一切正常.有关addthis配置参数的更多信息,请参见此处.
此代码解决了问题并节省了我正在寻找的加载时间.
在阅读这篇文章后,关于大多数当前的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内容而不是使用静态脚本标记,从而节省了我希望的时间.:)