Jump to content
Search Community

Search the Community

Showing results for tags 'polite load'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

  • Learning Center
  • Blog

Categories

  • Products
  • Plugins

Categories

  • Examples
  • Showcase

Categories

  • FAQ

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 1 result

  1. I was wondering how do you detect that GSAP is loaded into the DOM and ready to animate the banner? DoubleClick provides you with this in their example of polite loading a banner, where the JS and CSS is loaded later into the DOM. <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> But I found that when I added GSAP to this, my code would always load first then fire off and not wait for GSAP to be ready. So a dug a little deeper into DC's Enabler.js and found they actually had a loadScript function with call back. <script src="http://s0.2mdn.net/ads/studio/Enabler.js" type="text/javascript"></script> <script language="javascript"> 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); } } function politeInit(){ Enabler.loadScript('//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenLite.min.js', function(){console.log("TweenLite Loaded"); TweenLiteJS = true;}); Enabler.loadScript('//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js', function(){console.log("CSSPlugin Loaded"); CSSPluginJS = true;}); Enabler.loadScript('//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/easing/EasePack.min.js', function(){console.log("EasePack Loaded"); EasePackJS = true;}); Enabler.loadScript('script.js', function(){console.log("BannerScript Loaded"); Banner.init();}); //Load in CSS var extCSS=document.createElement('link'); extCSS.setAttribute("rel", "stylesheet"); extCSS.setAttribute("type", "text/css"); extCSS.setAttribute("href", Enabler.getUrl("styles.css")); document.getElementsByTagName("head")[0].appendChild(extCSS); document.getElementById("banner").style.opacity=1; document.getElementById("loading").style.opacity=0; document.getElementById("loading").style.display = "none"; document.getElementById("banner").style.display = "block"; } </script> So I ended up with this in the HTML and then this in the JS Banner.init = function(){ //Just an extra check to make sure all library files have loaded as well. if (document.readyState === "complete") { if( !TweenLiteJS || !CSSPluginJS || !EasePackJS) { console.log("Not ready to animate yet, try again in 500ms"); setTimeout( Banner.init, 500 ); } else { console.log("Animation start"); Banner.animate(); addListeners(); } } } And it works, the animation isn't fired off before its ready to. I was just wondering if I've over complicated things, or I've missed something. I actually got this idea from @letssock when talking about implementing GSAP into Celtra.
×
×
  • Create New...