Load ads defered (without blocking)

Ads’s scripts are evil, most part of them use document.write to create a new script element, and then it load an other script which make an iframe which load other script which make….and finally your page were blocked, not rendering, until ads are loaded.

We solved this problem using a very stupid defer technic. Steps:

1. make an empty container where ad has to be showed, ej:  <div id=”target”></div>
2. at bottom page, make second hide container, and put there the ad’s script, ej:  <div id=”src” style=”display:none;”> <script> relocateADS(’target’,’src’); //adsense ej </script> </div>
3. put relocateADS declaration before src div

relocateAds

This function is very simple, It just show the src div, and set the absolute position of  target to src. This script use jquery, but it is easy to change if you are not loading jquery

/**
 * move all ads dom element from src div to target div now use absolute position
 * to iframe banners
 */
function relocateAds(tgt,src) {
    try{
        //get elements
        var $s = $('#' + src);
        var $t = $('#' + tgt);
        //vars
        var last_pos = 0;
        var last_height = 0;

        //set initial pos and show
        $s.css({position:'absolute'}).show();                   

        /**
         * set interval to check window/components resize
         * on pos change or height change reset
         */
        setInterval(function(){
            var pos = $t.offset();
            if(pos !== last_pos ){
                last_pos = pos;
                $s.css(pos);
            }
            var height = $s.height();
            if(height !== last_height){
                last_height = height;
                $t.css({height:last_height});
            }
        },1000);                

    }catch(e){}

}

The final result: your page will load all content before ads.