Load multiple scripts asynchronously

Question

I am at my end here guys. I'm trying to speed up the load time of our home page. There are two ads that kill us for speed tests and usability. The ad code is script tags with in script tags like so:

<script type="text/javascript">if(typeof(cachebuster) == "undefined"){var cachebuster = 
 Math.floor(Math.random()*10000000000)} if(typeof(dcopt) == "undefined"){var dcopt = 
 "dcopt=ist;"} else {var dcopt = ""} if(typeof(tile) == "undefined"){var tile = 1}
 else 
 {tile++} document.write('<scr'+'ipt src="AD_URL;' + dcopt + ';tile=' + tile + 
 ';sz=728x90;ord=' + cachebuster + '?"></scr'+'ipt>');
</script>
<noscript>
 <a href="AD_URL" target="_blank" ><img src="AD_URL" border="0" alt="" /></a> 
</noscript>

This is the original code for one of the ads. The second is very similar. This takes forever to load. Sometimes as long as 10-15 seconds. Not cool.

I have tried to do somethng like this:

$('#HeaderAd').append(function(){
 var ad = '<"scr" + "ipt " type="text/javascript">if(typeof(cachebuster) == "undefined"){var cachebuster = Math.floor(Math.random()*10000000000)} if(typeof(dcopt) == "undefined"){var dcopt = "dcopt=ist;"} else {var dcopt = ""} if(typeof(tile) == "undefined"){var tile = 1} else {tile++} "</scr"+"ipt>";';
 var ad2 = 'document.write("<scr"+"ipt " src="http://ad.doubleclick.net/adj/ohn.auctionarms/shooting_sports_home;pos=atf_3;" + dcopt + ";tile=" + tile + ";sz=728x90;ord=" + cachebuster + "?">"</scr"+"ipt>");';
 var ad3 = '<noscript><a href="http://ad.doubleclick.net/jump/ohn.auctionarms/shooting_sports_home;pos=atf_3;sz=728x90;ord=123456789?" target="_blank" ><img src="http://ad.doubleclick.net/ad/ohn.auctionarms/shooting_sports_home;pos=atf_3;sz=728x90;ord=123456789?" border="0" alt="" /></a></noscript>';
 var ad_ = document.createElement('script');
 var ad_2 = document.createElement('script');
 ad_.type = 'text/javascript';
 ad_2.src = "http://ad.doubleclick.net/adj/ohn.auctionarms/shooting_sports_home;pos=atf_3;' + dcopt + ';tile=' + tile + ';sz=728x90;ord=' + cachebuster + '?";
 ad_.innerText = 'if(typeof(cachebuster) == "undefined"){var cachebuster = Math.floor(Math.random()*10000000000)} if(typeof(dcopt) == "undefined"){var dcopt = "dcopt=ist;"} else {var dcopt = ""} if(typeof(tile) == "undefined"){var tile = 1} else {tile++} ';// + 'document.write('+ad_2.src+');';
 ad_.appendChild(ad_2);
 console.log(ad_);
 return ad_;
});

but this gives me jquery errors and won't load. The ad won't load. If I try to do everything with only one 'document.createElement' then it still doesn't like it.

Am I doing this wrong? Is there a better way to make the loading of these ads asynchronous?

• dandavis: if the ad uses document.write(), you can't add it after the page loads. you can write a dummy document that shows only the ad, and show the ad using an iframe that you .src after booting. or, you can clobber the document.write method to collect the calls and inject that html into your document whenever's clever.

Answer 1

I eventually found a cool little jquery script called jqueryAd. This worked very well for what I was trying to do. It delayed the loading of the ads and greatly improved the speed. I found it here: jQueryAd