How to Load Advertisements Asynchronously

shabbir's Avatar author of How to Load Advertisements Asynchronously
This is an article on How to Load Advertisements Asynchronously in JavaScript and AJAX.
Web-pages can take take time to load for variety of reasons and if your page takes lot of time to load you have to identify areas where most of the time is taken. I have seen that in most cases it is always the Advertisements. At least that was the case for Go4Expert.

My next step was to load the ads asynchronously and so I started testing DFP by Google and other adservers to see if I can have ads without hindering the normal flow of page loading. Astonishingly I could not find a single yet reliable adserver that supports asynchronously loading of ads. DFP is still testing the same with select publishers. See here. So I was left with only one option to do it myself.

The Implementation



I have done this using very simple yet very effective technique of iframe and loading the frames after the complete page is done for user.

Put the ad code in an HTML file and upload it to the server.

Example : http://www.go4expert.com/ads/adauth.html - This is the same file which will be loaded in the right side of this article just above the author details.

Now add a needed div where you want to show an Ad.

HTML Code:
<div id="AdAuth"> </div>
And now the final JavaScript to load the Ad in the needed Div after the complete page loading is complete.

Code:
<script type="text/javascript"> 
(function(){
  function loadAds() {
    var c4 = "<iframe frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" width=\"300\" height=\"250\" src=\"http://www.go4expert.com/ads/adauth.html\"></iframe>";
	var adauth = document.getElementById('AdAuth'); if(adauth!=null) adauth.innerHTML=c4;
  }
  var oldonload = window.onload;
  window.onload = (typeof window.onload != 'function') ?
     loadAds : function() { oldonload(); loadAds(); };
})();
</script>
The important part is
Code:
  var oldonload = window.onload;
  window.onload = (typeof window.onload != 'function') ?
     loadAds : function() { oldonload(); loadAds(); };
Where you load the iframe only after the complete page is loaded. This makes user experience much faster.

Disadvantages



Remember this is not compatible with Google Adsense and you should not be using this technique with Adsense. Google Adsense clearly mentions that you cannot load Adsense in a frame different from your content frame. Do not get discourage because I have seen that Google Ads never blocks the page loading and I assume they have asynchronously loading of ads already in place.
coderzone's Avatar, Join Date: Jul 2004
Team Leader
Is this Asynchronous?
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
Quote:
Originally Posted by coderzone View Post
Is this Asynchronous?
Why Not?
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
Similar techniques is mentioned in the IAB Official Document as well

http://www.iab.net/media/file/rich_m..._practices.pdf
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
Nominate this article for Article of the month - Jul 2010
Mogan's Avatar, Join Date: Aug 2010
Newbie Member
can any one teach me how to hack smtp sever password and unsername and all so webmail username and password...
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
Vote for this article for Article of the month - Jul 2010
Full Zip Hoody's Avatar, Join Date: Sep 2010
Go4Expert Member
yes, ads usually take most of the time on the page load, but widgets do to. Share, social or other embedded type or plugin type take sometimes even more because most of the times they are not compatible or bad coded.