I'm a little confused how to do this, basically I have a page that has a Facebook Share button inserted via JavaScript:
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
The problem is that it's blocking the page load at that part, how can I insert this tag after page load and still have the script execute? I'll like to do it in an unobtrusive way, ideas?
Use the jQuery getScript command inside $(document).ready. This will download the script after the page has loaded. Example:
$(document).ready(function() {
$.getScript("http://static.ak.fbcdn.net/connect.php/js/FB.Share", function() {
alert("Script loaded and executed.");
});
});
You could use the jquery.getScripts to load it asynchronously.
Try something like this:
$(document).ready(function() {
var script = document.createElement( 'script' );
script.src = "http://static.ak.fbcdn.net/connect.php/js/FB.Share";
script.onload=optionallyDoSomethingWithTheScriptYouJustLoaded();//not needed
var headID = document.getElementsByTagName("head")[0];
headID.appendChild(script);
});
Inject the script tag into the dom as a callback of the document ready event.
you could do something like:
$(function() {
$.getScript('http://static.ak.fbcdn.net/connect.php/js/FB.Share', function() {
//do nothing here
});
});
