Is it possible to load a javascript ad last on the page to prevent slow load times?

Question

Is there a way to include a javascript-loaded advertisement last on the page, but have it positioned in the content? The primary purpose is to keep the javascript ad from slowing down the page load, so if there are other methods to achieve this please do share.

Answer 1

There is the defer attribute you could put on script blocks to defer its execution until the page completes loading.

<script src="myscript.js" type="text/javascript" defer>
// blah blah
</script>

I am not sure about the general recommendation about using this attribute though.

EDIT: As @David pointed out, use defer="defer" for XHTML

And you can always put the code inside the window.onload event so that it executes after the pages load:

window.onload = function () {
    // ad codes here

};

But the later approach may pose some problems, you might want to test it out first.

More information on this blog post by Dean Edwards, the guy who wrote the famous javascript packer.

---

EDIT: If the size of ad code itself is the problem, you can always defer the loading by combining the above methods with script injection via document.write:

function loadScript(src) {
    document.write('<script src="' + src + '" type="text/javascript"></script>');
}

So the resulting code might look something like this:

<script type="text/javascript" defer>

function loadScript(src) {
    document.write('<script src="' + src + '" type="text/javascript"></script>');
}

loadScript('http://ads.example.com/advertisements.js');

</script>

But as I've said, it depends on the specific ad code you get too. Because of the position document.write will write stuffs to might not be the location you want. Some modifications might be neccessary.

Answer 2

function addLoadEvent(func) {
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
        window.onload = func;
      } else {
        window.onload = function() {
          oldonload();
          func();
        }
      }
    }

The above code is a nice way to add a new onload event that doesn't interfere with your existing javascript. Then you can add a new load event to load the advertisements using the code below.

addLoadEvent(function() { // call to loadScript() here });

Answer 3

I came up with a method to let the ads load into invisible div's at the bottom of the page, and then move them up to their viewing positions when the rest of the page load is complete. See my blog post at http://gleneivey.wordpress.com/2010/03/17/48/