Dynamic Loading of JS and CSS files

For technicians who often design web pages, javascript and css are essential. Many may use this technology. However, if a large web application may contain a large number of javascript and css files, we all know that loading these files requires... SyntaxHighlighter. all ()

 

For technicians who often design web pages, javascript and css are essential. Many may use this technology. However, for a large web application that may contain a large number of javascript and css files, we all know that loading these files requires network bandwidth, in addition, many scripts or Such files may be a thankless task for developers. In addition, after the project is maintained, modifying a file may affect the effect of several pages. Files Added by yourself may have been loaded by others on the master node or elsewhere, resulting in excessive file waste. Therefore, we need a mechanism (or interface) to control the introduction of files, so that we can maintain them more conveniently. In the future, these maintenance work will be completed by js personnel, you do not have to check the pages one by one. Below, I will display this dynamically introduced file:

Give it a resounding name: JSLoader. js

/*

* JS file dynamic loading tool (2011-12-12)

*/

Var JSLoader = {

Scripts :{

Jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"

},

Browser :{

Ie:/msie/. test (window. navigator. userAgent. toLowerCase ()),

Moz:/gecko/. test (window. navigator. userAgent. toLowerCase ()),

Opera:/opera/. test (window. navigator. userAgent. toLowerCase ()),

Safari:/safari/. test (window. navigator. userAgent. toLowerCase ())

},

Call: (function (){

Function hasFile (tag, url ){

Var contains = false;

Var files = document. getElementsByTagName (tag );

Var type = tag = "script "? "Src": "href ";

For (var I = 0, len = files. length; I <len; I ++ ){

If (files [I]. getAttribute (type) = url ){

Contains = true;

Break;

}

}

Return contains;

}

Function loadFile (element, callback, parent ){

Var p = parent & parent! = Undefined? Parent: "head ";

Document. getElementsByTagName (p) [0]. appendChild (element );

If (callback ){

// Ie

If (JSLoader. browser. ie ){

Element. onreadystatechange = function (){

If (this. readyState = 'loaded' | this. readyState = 'complete '){

Callback ();

}

};

} Else if (JSLoader. browser. moz ){

Element. onload = function (){

Callback ();

};

} Else {

Callback ();

}

}

}

Function loadCssFile (files, callback ){

Var urls = files & typeof (files) = "string "? [Files]: files;

For (var I = 0, len = urls. length; I <len; I ++ ){

Var cssFile = document. createElement ("link ");

CssFile. setAttribute ('type', 'text/css ');

CssFile. setAttribute ('rel ', 'stylesheet ');

CssFile. setAttribute ('href ', urls [I]);

If (! HasFile ("link", urls [I]) {

LoadFile (cssFile, callback );

}

}

}

Function loadScript (files, callback, parent ){

Var urls = files & typeof (files) = "string "? [Files]: files;

For (var I = 0, len = urls. length; I <len; I ++ ){

Var script = document. createElement ("script ");

Script. setAttribute ('charset', 'gb2312 ');

Script. setAttribute ('type', 'text/javascript ');

Script. setAttribute ('src', urls [I]);

If (! HasFile ("script", urls [I]) {

LoadFile (script, callback, parent );

}

}

}

Function includeFile (options ){

// First load css and then load script www.2cto.com

LoadCssFile(options.css Files, function (){

// Load the prepared script

LoadScript (JSLoader. scripts. jquery, function (){

// Script required to load the page

LoadScript (options. scripts, null, "body ");

});

});

}

Return {include: includeFile };

})()

};

/*

* External call interface

* Include ({cssFiles: [], scripts: []})

*/

Var include = function (options ){

JSLoader. call. include (options );

}

 

After this file is introduced, all the remaining tasks on our page are to introduce it and the list of files required for other pages (note: we can introduce many public js files in advance ), the general file structure is as follows: