Javascript: Load external scripts in <head> after page load
Question
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?
5 answers
solution1
1 2013-01-17 06:30:45
<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.
solution2
0 2012-05-18 11:17:17
我们可以将require.js用作脚本或模块加载器，看看吧。
solution3
0 2012-05-18 11:18:02
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);
})();
solution4
0 2012-05-18 20:02:28
Could you put the sharethis code in a separate frame? Then the main page and the social bar would load independent of each other.
solution5
0 2014-09-29 16:28:43
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.