How to Load Advertisements Asynchronously

Discussion in 'JavaScript and AJAX' started by shabbir, Jul 1, 2010.

  1. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    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:
    <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.
     
  2. coderzone

    coderzone Super Moderator

    Joined:
    Jul 25, 2004
    Messages:
    736
    Likes Received:
    38
    Trophy Points:
    28
    Is this Asynchronous?
     
  3. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    Why Not?
     
  4. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
  5. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
  6. Mogan

    Mogan New Member

    Joined:
    Aug 12, 2010
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    :undecided can any one teach me how to hack smtp sever password and unsername and all so webmail username and password...
     
  7. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
  8. Full Zip Hoody

    Full Zip Hoody New Member

    Joined:
    Sep 29, 2010
    Messages:
    20
    Likes Received:
    0
    Trophy Points:
    0
    Occupation:
    Programer
    Location:
    US of A
    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.
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice