viernes, 27 de agosto de 2010

Script for dynamic JavaScript and CSS loading

With the following script, you can easily load javascripts and css files dynamically and asynchronously of course:


/**javascript and css loader
* @author: sgurin
*/
(function(){

var _loadF = function(name, type, listener){
var el=null;
if (type=="js"){
el=document.createElement("script");
el.setAttribute("type","text/javascript");
if(listener) {
el.onreadystatechange = function () {
if (this.readyState == 'complete') listener();
};
el.onload=listener;
}
el.setAttribute("src", name);
}
else if (type=="css"){
el=document.createElement("link");
el.setAttribute("rel", "stylesheet");
el.setAttribute("type", "text/css");
el.setAttribute("href", name);
}
document.body.appendChild(el);
};
/**public global function
* @param css - array of css url to load. can be null
* @param js - array of javascript scripts urls to load. can be null
* @param listener function that will be called when ALL js and css files are loaded.
*/
LOADFILE = function (css, js, listener) {
css=css==null?[]:css;
js=js==null?[]:js;
var subListener=function(){
LOADFILE.counter--;
if(LOADFILE.counter==0)
listener();
};
for(var i=0; i<css.length; i++) {
_loadF(css[i], "css", subListener);
}
for(var i=0; i<js.length; i++) {
LOADFILE.counter++;
_loadF(js[i], "js", subListener);
}
};
LOADFILE.counter=0;//file load counter

})();


For example, you can dynamically load all your javascript application's javascript and css files like this:


LOADFILE(
["http://yui.yahooapis.com/2.8.1/build/slider/assets/skins/sam/slider.css",
"http://yui.yahooapis.com/2.8.1/build/fonts/fonts-min.css",
"http://yui.yahooapis.com/2.8.1/build/colorpicker/assets/skins/sam/colorpicker.css"],

["http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom-event.js",
"http://yui.yahooapis.com/2.8.1/build/animation/animation-min.js",
"http://yui.yahooapis.com/2.8.1/build/dragdrop/dragdrop-min.js",
"http://yui.yahooapis.com/2.8.1/build/slider/slider-min.js",
"http://yui.yahooapis.com/2.8.1/build/element/element-min.js",
"http://yui.yahooapis.com/2.8.1/build/colorpicker/colorpicker-min.js"],

function(){
//my javascript application's code
var Event = YAHOO.util.Event,
picker;
Event.onDOMReady(function() {
YAHOO.log("Creating Color Picker.", "info", "example");
picker = new YAHOO.widget.ColorPicker("container", {
showhsvcontrols: true,
showhexcontrols: true,
images: {
PICKER_THUMB: "assets/picker_thumb.png",
HUE_THUMB: "assets/hue_thumb.png"
}
});
YAHOO.log("Finished creating Color Picker.", "info", "example");
var onRgbChange = function(o) {
YAHOO.log("The new color value is " + o.newValue, "info", "example");
}
picker.on("rgbChange", onRgbChange);
Event.on("reset", "click", function(e) {
picker.setValue([255, 255, 255], false);
});
Event.on("gethex", "click", function(e) {
alert("Current hex value: " + picker.get("hex"), "info", "example");
});
});
});


Hope this help somebody

No hay comentarios: