Forcing external javascript files (from Digg, Reddit) to load last

Question

I'm working on a WordPress site that has two external javascript files load about half-way down the page. The files are badges from Reddit and Digg, and often add about 4-8 seconds to the total loading time of page — while also preventing the bottom 50% of the page from loading too.

The Digg and Reddit javascripts render an <iframe> (which I assume needs to load completely before the rest of my web page is loaded), and thus adds a big amount of extra load time.

I tried moving the <script> tags to the bottom of the page, right before </body>, but the badges render just below the footer instead of where they need to be.

How can I force these two external javascript files to load last, but still render where they need to?

Answer 1

Where you render the script tags shouldn't necessarily imply where the UI those scripts generate appears-- that it does seems a goofy or questionably designed. Do the scripts have known functions in them that let you hand them a container div or something in which to render their UI?

You're correct, of course, in loading them last, before </body>. That's the right strategy.

Answer 2

You could create a div ["divA"] where you want your Digg/Reddit iframes to go [So this is basically just a placeholder]. When the page is done loading, append a "script" element to head so the Digg/Reddit scripts can load. When they're done loading, you can move them from body to divA.

document.body.removeChild(iframe);
document.body.getElementById("divA").appendChild(iframe);

Answer 3

The quick answer is - no simple way. If you user defer="true" on the script tags, and they use document.write, it will still write out the content where it was when it loaded and not where the script tag was inserted.

Some of the answers in this question might help you: http://stackoverflow.com/questions/2233097/how-can-i-stop-an-iframe-reloading-when-i-change-its-position-in-the-dom

Some of the other answers in this thread suggest removing the iframe and then reinserting it. However, that will lead you straight to the problem in the above-linked question -- it will cause the content of the iframe to load twice.

The general approach will be to put a placeholder where you want them and then move them into that placeholder when they are ready.