延迟addThis的执行

Question

我有一个网站，使用谷歌地图加上我自己的javascript。我使用的是社交按钮的addThis javascript。在我的javascript加上google javascript加载并运行(在$(document).ready...上)之前，这个站点并不是真正可用的，所以我想尽量减少运行过程中的延迟。所以我在考虑推迟AddThis模块，直到其他一切都完成了，因为这不是那么重要。

关于stackoverflow的其他问题建议将指向我想要延迟的javascript的链接放在页面底部。但我是否认为这与我无关，因为$(document).ready...不会触发，直到所有链接的javascript加载完毕，无论它放在哪里？

如果是这样，我应该在$(document).ready...之后以某种方式加载addThis javascript吗？

尽管我真的不希望在所有的google地图、图片等都加载完之后才运行addThis (我相信.ready()不会等待)。有没有推荐的方法来处理这类事情？

作为参考，典型的addThis用法...

<script type="text/javascript">
    var addthis_config = {
        "data_track_addressbar":false,
        "ui_click":true,
        "data_use_cookies": false
    };
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#"></script>

<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_compact" title="Share"></a>
</div>

Answer 1

我想出了这个(如果有更好的方法，请告诉我)。

<script type="text/javascript">
    var addthis_config = {
        "data_track_addressbar":false,
        "ui_click":true,
        "data_use_cookies": false
    };

    $(window).on("load", function(){
        $('head')
            .append($('<script>')
            .attr('type', 'text/javascript')
            .attr('src', "http://s7.addthis.com/js/250/addthis_widget.js#"));        
    });
</script>

<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_compact" title="Share"></a>
</div>

Answer 2

看一下异步加载AddThis：

http://support.addthis.com/customer/portal/articles/381221-optimizing-addthis-performance#.UZFNACtAR7Q

至少，这将最小化加载时间(但幸运的是，大多数计算机上已经缓存了AddThis，因此加载时间非常短)。

Answer 3

以防有人还在寻找解决方案。AddThis已经发布了许多人对页面延迟感到恼火，他们现在提供了几个选项，你可以在你的脚本中控制它们在你( dom )准备好的时候加载:虽然你也可以使用动态加载或附加#async=1来异步加载，但我认为另一个好的选择就是这样-在dom准备好之前不会运行：

<script type="text/javascript">


 /*
    //if you have a pub_id, add it here and uncomment these two lines
    var addthis_config = addthis_config||{};
    addthis_config.pubid = 'YOUR PUBID';
    */
    var addthisScript = document.createElement('script');
    addthisScript.setAttribute('src', 'http://s7.addthis.com/js/300/addthis_widget.js#domready=1')
    document.body.appendChild(addthisScript)
</script>

你可以使用read more here