Loading an external script after page load with jQuery

Question

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?

Answer 1

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.");
    });
});

Answer 2

You could use the jquery.getScripts to load it asynchronously.

Answer 3

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);
 });

Answer 4

Inject the script tag into the dom as a callback of the document ready event.

Answer 5

you could do something like:

$(function() {
  $.getScript('http://static.ak.fbcdn.net/connect.php/js/FB.Share', function() {
    //do nothing here
  });
});