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