13

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.

niton
  • 8,771
  • 21
  • 32
  • 52
britg
  • 225
  • 2
  • 8

3 Answers3

10

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.

chakrit
  • 61,017
  • 25
  • 133
  • 162
  • If you are targeting XHTML, be sure to use defer="defer" rather than just defer. – DavGarcia Jan 18 '09 at 03:25
  • 1
    If using defer or onload works, that's just pure luck. Most ad-scripts use `document.write` to output html, and if you try to `document.write` after the document has been closed it will delete the page and output to a blank document. onload and defer executes after the document is closed. – gregers Mar 24 '14 at 15:06
  • @gregers Do you also have suggestion for a more correct answer? If so, I'll happily update mine. (or just post as another answer.) – chakrit Mar 25 '14 at 12:20
  • @chakrit **TL;DR There is no quick-fix**. I've written [crapLoader](https://github.com/gregersrygg/crapLoader), which replaces `document.write` and loads scripts async. But it has too many side-effects, and they're really hard to find. It works on many scripts, but not always. So it's not maintained anymore. I'm now working on [Garðr](https://github.com/gardr/gardr) that loads ads in iframes, but it's more complex to set up than crapLoader. – gregers Mar 26 '14 at 13:22
1
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 });
user53964
  • 511
  • 3
  • 2
0

I usually put the tag to load script just before the end of body tag. So it loads at the end of the page. This does not give any validation errors or whatsoever.

Esger
  • 1,310
  • 12
  • 18