Javascript:页面加载后在 中加载外部脚本

Question

我正在使用 ShareThis 在我的网站上包含一个不错的社交网络共享栏。问题是它有时加载速度非常慢，并使页面加载持续几秒钟。

HTML 头部必须包含以下内容:

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

然后下面是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>

我在想，如果我可以强制它在页面之后加载，那么它就不会减慢页面速度。是否有捷径可寻？例如，是否可以在页面加载后通过 javascript 将所有这些代码插入到 HTML 中的正确位置，然后按原样继续加载，以便快速加载页面，然后 ShareThis 栏可以在其余部分之后加载页面的？

Answer 1

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

不确定为什么要使用 loader.js。它在我们的网站上没有它也能正常工作。