Does advertising block your web page? That's because most of them inject content by using the ancient document.write functionality. While document.write is a no brainer way of injecting content, it does block the page until it's done and it can only work before the DOM is completely loaded. This is trouble when your page needs to be fast, but some ad provider is slow. It is even more trouble if you want to create a one page application with advertising on it. Even if the ad provider you're working with is willing to change to a more host page friendly version of injecting content, you still have the problem, because usually advertising works like this:
- You include one (or more) script tags from the ad provider.
- This ad provider code normally already heavily use document.write to create some div, set up some variables and...include other external scripts.
- Repeat step 2. zero or more times (even six time is possible).
- Finally an external script will include (via document.write, of course) the actual ad as a flash, link with image or whatever they think is attractive to your users.
Basically, they do:
// in the first level included script
document.write('<scr'+'ipt type="text/javascript" src="./second.js"></scr'+'ipt>');while the included script (second.js in this case) asks for the next one in chain:
document.write('<scr'+'ipt type="text/javascript" src="./third.js"></scr'+'ipt>');...and so on until one script actually injects some visible ad:
document.write('<a href="..."><img src="..."/>...</a>');One solution for this problem is to intercept document.write calls and process them asynchronously, while still preserving their intended destination position.
This lib needs JQuery for the comfort of loading external scripts asynchronously. A future version might get rid of this dependency.
Tested with JQuery 1.7.1 and JQuery 1.7.2.
The human readable working source code is async-document.write.js.
Current minified version is async-document.write-1.0.20.min.js The minified version is done with the excellent Google Closure Compiler (http://code.google.com/closure/compiler/)
First, include the JavaScript (either minified of human readable) as early as possible, but after jQuery.
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="./async-document.write.js"></script>
</head>By doing the above, all calls to document.write are intercepted and queued to apply them later. After your most important content is loaded, you can start applying the document.write calls and any calls generated by applying the queued calls. One good timing is on document ready event:
$(document).ready(function () {
document.applyWrite();
});This should be all.