solution: lazy loading JS ad code containing document.write()

Hi everybody!

After I have received lots of helpful information here, I´d like to give back today…

Some of you may have experienced problems using JS ad code (e.g. google adsense etc). This can include complete page freezing due to ad server lags… the solution would be to lazy load the code. Unfortunately ad code often includes document.write() statements, which makes it impossible to run it if the page has already rendered. Also most adserver policies forbid changes in the delivered code, so you have to stick with document.write() …

Ok whats the solution here: simply overload document.write for a short period of time, and replace it with a function that buffers the output, and later writes the buffer to the innerHTML of a div. Of course you have to restore the old document.write function afterwards…

Here is the code:

[CODE]var domWrite = (function(){ // by Frank Thuerigen
// private
// (probably helper functions for code sanitizing etc.)

return function( pDiv, pSrc ){ // public

var e = ( typeof pDiv == ‘string’ ?
document.getElementById( pDiv ) :
pDiv ),
s = document.createElement(‘script’),
dw = document.write, // save document.write()
buf = ”, // output string buffer
oldbuf = ”, // output string buffer
t = ”, // timeout
ms = 100; // milliseconds

function evals( pString ){ // eval embedded script tags in HTML code
var scripts = [],
script,
regexp = /<script[^>]*>([sS]*?)</script>/gi;
while ((script = regexp.exec(pString))) scripts.push(script[1]);
scripts = scripts.join(‘n’);
if (scripts) eval(scripts);
}

function exec(){ // output & restore document.write()
if ( buf !== oldbuf ){
oldbuf = buf;
t=window.setTimeout( exec, ms ); // repeat test timeout
}
else {
e.innerHTML = buf; // write output to element
evals( buf ); // tbd: correct eval sequence if multiple scripts
document.write=dw; // restore document.write()
}
}

document.write = function( pString ){ // overload document.write()
window.clearTimeout(t);
oldbuf = buf;
buf += pString; // add string to buffer
t=window.setTimeout( exec, ms );
}

s.setAttribute(‘language’,’javascript’);
s.setAttribute(‘type’,’text/javascript’);
s.setAttribute(‘src’, pSrc);
document.getElementsByTagName(‘head’)[0].appendChild(s);
}
})();
[/CODE]

Here is a sample of how to use it with google adsense:

[CODE]
<script type=”text/javascript”><!–
google_ad_client = “pub-568508999XXXXX”;
/* header block */
google_ad_slot = “05460XXXXX”;
google_ad_width = 468;
google_ad_height = 15;
//–>
</script>
<script type=”text/javascript”>
[B]domWrite( ‘myDivId’, ‘http://pagead2.googlesyndication.com/pagead/show_ads.js’ );[/B]
</script>
[/CODE]

( “myDivId” of course is the id of the DIV you want the ad to appear in )

…and finally here you can see it at work:
[URL=”http://blog.phpbuero.de/?p=26″]http://blog.phpbuero.de/?p=26[/URL]
The ads below the right sidebar are loaded using this technique.

CAVEAT: I don´t know wether google approves this, but since it doesn´t change their code or functionality I don´t think it is a problem. Anyway, use it on your own risk!

I hope this helps …

Have fun,
Frankie

Also in #JavaScript _↴