Delay execution of addThis

Question

I have a website that uses google maps plus my own javascript. I am using the addThis javascript for social buttons. The site isnt really usable until my javascript plus the google javascript loads and runs (on $(document).ready...) so I want to minimise delay in getting things going. So I was looking at postponing the AddThis module until everything else has finished as its not that important.

Other question on stackoverflow suggest placing the link to the javascript that I want to delay at the bottom of the page. But am i right in thinking this is not relevant to me as $(document).ready... will not fire until all linked javascript has loaded no matter where its placed?

If so, should I somehow load in the addThis javascript after on $(document).ready... ?

Though I'd really prefer not to run addThis until all google maps images etc are all loaded (I believe .ready() does not wait for this). Is there a recomended way to handle this kind of thing?

For reference, typical addThis usage...

<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

I came up with this (please let me know if there is a better way).

<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

Take a look at loading AddThis asynchronously:

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

At the very least, this will minimize load times (but luckily AddThis is already cached on most computers, so there's really very little load time).

Answer 3

Just in case somebody is still looking for solution. AddThis has already released that many people are annoyed by page delays and they now offer several options which you can control in your script to load when you (dom) are ready: Although you can also use dynamic loading or appending #async=1 to load asynchronously, I think the other good option is just put in this way - which will not run until dom is ready:

<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>

You can read more here