Javascript: Load external scripts in <head> after page load

Question

Javascript: Load external scripts in <head> after page load

4.1k Views Asked by Alasdair At 06 April 2025 at 16:24

I'm using ShareThis to include a nice social network share bar on my site. The problem is that it loads very slowly sometimes and holds up the loading of the page for several seconds.

The following has to be included in the HTML head:

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>

Then the following is at the bottom of body:

<script>
var options={ "publisher": "xxxxxxxxxxxxxxxxxxxx", "position": "left", "ad": { "visible": true, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "googleplus", "pinterest", "amazon_wishlist", "email", "sharethis"]}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
</script>

I was thinking that if I could force this to load after the page, so it doesn't slow the page down. Is there an easy way to do this? For instance, could all this code be inserted into the correct places in the HTML by javascript after the page is loaded, and then continue to load as it should, in order that the pages loads quickly and then the ShareThis bar can load after the rest of the page?

Original Q&A

There are 5 best solutions below

**Terje-plus-plus** · Answer 1

Terje-plus-plus On 18 May 2012 at 20:02

Could you put the sharethis code in a separate frame? Then the main page and the social bar would load independent of each other.

**Shreedhar** · Answer 2

Shreedhar On 18 May 2012 at 11:17

We can use require.js as script or module loader, have a look at it.

**visualidiot** · Answer 3

Sounds like you're after lazy loading!

(function() {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'http://w.sharethis.com/button/buttons.js';
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
})();

**Arnaud Kleinveld** · Answer 4

<script id="shareThisScript" type="text/javascript">var switchTo5x=true;</script>

<script type="text/javascript">
    setTimeout(function() {
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = 'http://w.sharethis.com/button/buttons.js';
        var c = document.getElementById('shareThisScript');
        c.parentNode.appendChild(s, c);

        s = document.createElement('script');
        s.type = 'text/javascript';
        s.innerHTML = 'var options={ "publisher": "xxxxxxxxxxxxxxxxxxxx", "position": "left", "ad": { "visible": true, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "googleplus", "pinterest", "amazon_wishlist", "email", "sharethis"]}};var st_hover_widget = new sharethis.widgets.hoverbuttons(options);';
        c.parentNode.appendChild(s, c);
    }, 10);
</script>

Not sure why you use the loader.js. It works on our website without it.

**MiguelSlv** · Answer 5

works with lazyload using like this for buttons (but not for botton bar):

 window.onload = function() {       
    LazyLoad.js( ['http://w.sharethis.com/button/buttons.js','http://s.sharethis.com/loader.js'], function () {
      stLight.options(
        { publisher: "xxxxxxxxxxxxxx", doNotHash: true, doNotCopy: true ,hashAddressBar: false}
      );
    }); 
  }

check this lazyload

Javascript: Load external scripts in <head> after page load

There are 5 best solutions below

Related Questions in JAVASCRIPT

Related Questions in SHARETHIS

Trending Questions

Popular # Hahtags

Popular Questions