Conjuring YUI from thin air

I love the YUI loader as it is a great way of including the YUI on the fly. The coolest bits about it is that it gets the YUI components from the CDN and knows the dependencies so I don’t have to. So if I need the YUI for something, I don’t need extra SCRIPT nodes a maintainer has to include, just my SCRIPT. However, what we still need is including the YUI loader itself.

Unless… you use the YAHOO_config listener. This thing is older than both YUI get and YUI Loader and is an object method that gets called every time a YUI component is loaded. So why not load the YUI Loader using this?

One problem is that the YUI Loader doesn’t call the config listener saying it is a loader, but saying it is the get utility. Another issue is that it does not work to execute the Loader immediately after it called itself “get”. The workaround is to use a timeout.

Wrap all of that inside the YAHOO_config object and you’ll conjure the YUI out of thin air. The following example loads YUI Dom, YUI Event and alerts “done” once all is ready. Check it out here

YAHOO_config = function(){
var s = document.createElement('script');
s.setAttribute('type','text/javascript');
s.setAttribute('src','http://yui.yahooapis.com/2.5.2/'+
'build/yuiloader/yuiloader-beta-min.js');
document.getElementsByTagName('head')[0].appendChild(s);
return{
listener:function(o){
if(o.name === 'get'){
window.setTimeout(YAHOO_config.ready,1);
}
},
ready:function(){
var loader = new YAHOO.util.YUILoader();
var dependencies = ['yahoo','dom','event'];
loader.require(dependencies);
loader.loadOptional = true;
loader.insert({
onSuccess:function(){
console.log('done!');
}
});
}
};
}();

Thanks to Alex Liu to get the setTimeout trick.

Tags: javascript, lazyload, trick, webdevtrick, YUI