Polite loading GSAP into a DoubleClick banner

The end is nigh!

Well, for Flash banners it is, DoubleClick now has a big fat notice at the top of their Studio console alerting those who haven’t been keeping up that Chrome will be setting its new Plugin Power Saver feature on as default, and along with that they’ve put up a little banner that they’ve whipped up in Google Web Designer.

So as a starting point for this banner, I headed over to DC’s template database and found a 300×250 polite loading banner.

And this is pretty much what DC provide as a template, and I could just duplicate the JS loading code for other libraries that I wanted to load.

The code itself makes sense, wait for the Enabler (the bit of the ad that does all the tracking, and is what DC can charge out to advertisers) then load in the extra JS and CSS. And this all happens after the page has loaded, so it should be a smooth experience for the user.

<script src="http://s0.2mdn.net/ads/studio/Enabler.js" type="text/javascript"></script> 
<script language="javascript">
    //Initialize Enabler
    if (Enabler.isInitialized()) {
        init();
    } else {
        Enabler.addEventListener(studio.events.StudioEvent.INIT, init);
    }
    //Run when Enabler is ready
    function init(){
        if(Enabler.isPageLoaded()){
            politeInit();
        }else{
            Enabler.addEventListener(studio.events.StudioEvent.PAGE_LOADED, politeInit);
        } 
    }

    function politeInit(){      
    //Load in Javascript
    var extJavascript = document.createElement('script');
    extJavascript.setAttribute('type', 'text/javascript');
    extJavascript.setAttribute('src', Enabler.getFilename('DCRM_HTML5_inPage_Polite_300x250.js')); 
    document.getElementsByTagName('head')[0].appendChild(extJavascript);

    //Load in CSS
    var extCSS=document.createElement('link');
    extCSS.setAttribute("rel", "stylesheet");
    extCSS.setAttribute("type", "text/css");
    extCSS.setAttribute("href", Enabler.getFilename("DCRM_HTML5_inPage_Polite_300x250.css")); 
    document.getElementsByTagName("head")[0].appendChild(extCSS);
    document.getElementById("container_dc").style.opacity=1;
    document.getElementById("loading_image_dc").style.opacity=0;
    document.getElementById("container_dc").style.display = "block";
}
</script>

However, the problem I had, was that I wanted to use GSAP, it’s such a powerful animation platform that I’ve used in AS2 and AS3 for years, so the transition to using it in JS was smooth.

I did a little digging and found the Enabler.js SDK Page and I noticed that they’ve got a Enabler.loadScript(url,callback); function much like jQuery.

<script language="javascript">
    //Library flags
    var TweenLiteJS = false, CSSPluginJS = false, EasePackJS = false;
    //Initialize Enabler
    if (Enabler.isInitialized()) {
        init();
    } else {
        Enabler.addEventListener(studio.events.StudioEvent.INIT, init);
    }
    //Run when Enabler is ready
    function init(){
        if(Enabler.isPageLoaded()){
            politeInit();
        }else{
            Enabler.addEventListener(studio.events.StudioEvent.PAGE_LOADED, politeInit);
        } 
    }
    //Load JS and CSS
    function politeInit(){
        Enabler.loadScript('//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenLite.min.js', function(){TweenLiteJS = true;});
        Enabler.loadScript('//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js', function(){CSSPluginJS = true;});
        Enabler.loadScript('//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/easing/EasePack.min.js', function(){ EasePackJS = true;});
        Enabler.loadScript('script.js', function(){Banner.init();});

        //Load in CSS
        ...
    }
</script>

This was followed by the Banner.init(); code inside the script.js:

Banner.init = function(){
    if( !TweenLiteJS  || !CSSPluginJS  || !EasePackJS) {
        console.log("Not ready to animate yet, try again in 500ms");
        setTimeout( Banner.init, 500 );
    } else {
        Banner.animate();
    }
}

Now this worked a treat, but I felt uneasy about having a setTimeout loop there, constantly checking if the banner was ready or not.

So I headed to the GSAP forums where Jack and everyone else from the GSAP are very friendly to ask their advice.

And now Jack came up with this succinct bit of code:

function politeLoad(urls, onComplete) {
    var l = urls.length,
        loaded = 0,
        checkProgress = function() {
            if (++loaded === l && onComplete) {
                onComplete();
            }
        },
        i;
    for (i = 0; i < l; i++) {
        Enabler.loadScript(urls[i], checkProgress);
    }
}
//now you can just feed stuff into that one function and give it a callback...
politeLoad(['//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenLite.min.js',
            '//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js',
            '//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/easing/EasePack.min.js',
            'script.js'], function() {
    Banner.init(); //or whatever you want called
});

It still makes use of the Enabler.loadScript(url, callback); function, but feeds it an array and checks it continually to see if all the dependencies are there before calling the on complete callback.

Totally brilliant.