unplugged_web Posted November 8, 2011 Share Posted November 8, 2011 I recently had a problem with facebook's social plugins not allowing my site to load. This led me to the realisation that I need to make sure all of the javascript for google's plus one and facebook's social plugins only loaded after the rest of the page and all the images had loaded, but I'm not sure how to do this. I have all of the code just before the </body> tag, but it's still not waiting until everything's been loaded yet. How do I do this? The code I've got at the moment is this: <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'XX-XXXXXX-X']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();</script><script src="http://connect.facebook.net/en_US/all.js#appId=XXXXXXXXXXXXXXXXX&xfbml=1"></script><!-- Place this tag after the last plusone tag --><script type="text/javascript">(function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();</script> Thanks Link to comment Share on other sites More sharing options...
justsomeguy Posted November 8, 2011 Share Posted November 8, 2011 You need to use the body's onload event. Set up a function to run on load, and put your Javascript code in there. Link to comment Share on other sites More sharing options...
unplugged_web Posted November 8, 2011 Author Share Posted November 8, 2011 You need to use the body's onload event. Set up a function to run on load, and put your Javascript code in there.I tried to do that by adding <body onLoad script:()> To the tag, but it didn't make any difference. I'm not sure how to get only the javascript files at the bottom of the <body> tags to load after everything else has. Sorry it's probably a dumb question but I can't work it out at the moment Link to comment Share on other sites More sharing options...
justsomeguy Posted November 8, 2011 Share Posted November 8, 2011 That's not the right syntax to define an onload event, check the references. You'll want to put any script tags which link to external files at the end of the body, and any code that needs to be executed should go in the event handler. The event handler will fire after all images and scripts have been loaded. Link to comment Share on other sites More sharing options...
thescientist Posted November 8, 2011 Share Posted November 8, 2011 it would be helpful if you posted the code you tried (unless that what was what you literally tried) so we could advise based on your attempted implementation. If you are including the scripts in external files, then you could put them within the context of a function. Personally I just use window.onload i.e.external.js window.onload = function(){ //google+ code //facebook code}; Link to comment Share on other sites More sharing options...
unplugged_web Posted November 8, 2011 Author Share Posted November 8, 2011 it would be helpful if you posted the code you tried (unless that what was what you literally tried) so we could advise based on your attempted implementation. If you are including the scripts in external files, then you could put them within the context of a function. Personally I just use window.onload i.e.external.jswindow.onload = function(){ //google+ code //facebook code}; Thanks the code at the bottom is:<script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'XX-XXXXXX-X']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();</script><script src="http://connect.facebook.net/en_US/all.js#appId=XXXXXXXXXXXXXX&xfbml=1"></script><!-- Place this tag after the last plusone tag --><script type="text/javascript">(function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();</script> and I want to get all of that to only execute after the page has loaded completely So am I right in thinking I can use the window.onload function and put all of that code in there? Or will I need to change the code at all? Also If I use that then I guess I use <body onload function()> to get it to actually load? Link to comment Share on other sites More sharing options...
thescientist Posted November 8, 2011 Share Posted November 8, 2011 perhaps you should familiarize yourself with event handlers. if you are assigning code to run on window onload, there's no reason to have it run on body onload as well, for this example, it's on or the other. the code given by the social networks are fairly self contained, they just need the ability to include themselves on page that has a DOM loaded. (which is why we are doing the onload stuff). Anyway, why don't you just try it out and see how it goes? Keep an eye on your error console and see if anything comes up. Link to comment Share on other sites More sharing options...
unplugged_web Posted November 8, 2011 Author Share Posted November 8, 2011 perhaps you should familiarize yourself with event handlers. if you are assigning code to run on window onload, there's no reason to have it run on body onload as well, for this example, it's on or the other. the code given by the social networks are fairly self contained, they just need the ability to include themselves on page that has a DOM loaded. (which is why we are doing the onload stuff). Anyway, why don't you just try it out and see how it goes? Keep an eye on your error console and see if anything comes up. Thanks I'll try, I was using it without any problems, but at the weekend facebook were having problems and the site didn't load at all Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.