extsrc.js beta! is a library to make ALL scripts run AFTER the page loads and shown to user. It plays nice even with document.write.

Think of it as <script DEFER> that's cross-platform and supports deferred document.write.

If your site has <script src="..."> (most of them do) - your browser will leave user screen blank until it loads ALL those scripts. It can significantly slow down your site.

extsrc.js is used to solve this problem with scripts and social widgets that sometimes delay EVERYTHING until page loads (user will look at blank screen for minute if your social widget takes minute to load).

How to solve? Add extsrc.js, then change all src="" to extsrc="" and you're done!

Use asyncsrc="" if you are sure this script doesn't use document.write to get even more speed up.

Tested on IE6/8 / Opera 10 / Chrome 7 / Firefox 3.

<script src="http://extsrcjs.googlecode.com/svn/trunk/extsrc.js"></script>
<script extsrc="...."></script>
<script asyncsrc="...."></script>

Note that it's not recommended to use script hosted on extsrcjs.googlecode.com, download it to your own server and run from there.

Download:

• full source
• minified (lacks comments, authors and might get outdated)

You can also use extsrc.complete().

Note that it runs only after ALL extsrc's are finished loading (NOT when document is ready to render, like in JQuery's ready).

extsrc.complete(function() { 
    alert('All extsrcs loaded!'); 
});

Issues & edge cases

Note that there are (probably rare) cases, when extsrc won't work: http://kangax.github.com/jstests/async-document-write-test/ (typically those don't appear in external scripts, except for inline scripts, but there's no way to fix that)

Demo, tests and recommendations

Demo and more information

extsrc vs asyncsrc

• Google Adsense: don't use either, don't change their code. It will work, but it's against TOS.
• JQuery: don't use, if you need to - extsrc for JQuery and it's plugins (safer!), and use extsrc to load your own code that uses JQuery.
• Google Maps: use asyncsrc.
• Twitter Button: use asyncsrc.
• Facebook button: use their own async code or asyncsrc.
• Statcounter (and most other counters): use extsrc.

Inline scripts and/or JQuery

Loading JQuery via extsrc is NOT recommended, you are better off loading it via usual <script src="">. The reason for this is that JQuery is principal element for many sites, which loads main functionality - there's no reason to display non-functional site.

If you do load - note that this WON'T WORK!

<script extsrc="jquery.js">
<script>
  $(document).ready(...);
</script>

The PROBLEM here is that inline script will run earlier than jquery.js. Solution is to make inline script external and load it via extsrc too.

<script extsrc="jquery.js">
<script extsrc="my-inline-script.js">

Inline scripts

If your code looks like this:

<script src="smth.js"></script>
<script>
  // some code here
</script>

then the correct way to move this to extsrc is:

<script extsrc="smth.js"></script>
<script>
extsrc.complete(function() { 
  // some code here
});
</script>