JavaScript include/import Dynamic Loading Js/css File Method summary

The first type: generally used in external CSS files to load the necessary files

Program code

The code is as follows	Copy Code
@import URL (style.css);

/* can only be used in a CSS file or in a style label * *

The second: Simply load an external CSS file on the page

Program code

The code is as follows	Copy Code
Document.createstylesheet (Cssfile);

Third: Create a CSS link tag with the CreateElement method

Program code

The code is as follows	Copy Code
var head = document.getElementsByTagName (' head '). Item (0); var style = document.createelement (' link '); Style.href = ' style.css '; Style.rel = ' stylesheet '; Style.type = ' text/css '; Head.appendchild (style);

Here, I used several functions in the project, I hope to be useful!

Program code

The code is as follows

Copy Code

Function Loadjs (file) {     var scripttag = document.getElementById (' Loadscript ');      var head = document.getelementsbytagname (' head '). Item (0);     if (scripttag) head.removechild (Scripttag);     script = document.createelement (' script ');     script.src = ". /js/mi_ "+file+". js ";     script.type = ' text/javascript ';     script.id = ' loadscript ';     head.appendchild (script); } function Loadcss (file) { var Csstag = document.getElementById (' loadcss '); var head = document.getElementsByTagName (' head '). Item (0); if (Csstag) head.removechild (Csstag); CSS = document.createelement (' link '); Css.href = ".. /css/mi_ "+file+". css "; Css.rel = ' stylesheet '; Css.type = ' text/css '; css.id = ' loadcss '; Head.appendchild (CSS); }

Use JS to dynamically load CSS files on the page

Just when I was writing the essay, I found that Cnblogs seemed to filter out the CSS that I defined in the HTML of the article (for example: <link rel= "stylesheet type=" Text/css "href=" Xxx.css "/>"). Remember the previous collection of a JS function, you can dynamically load CSS files, turn over the computer really found, code posted, not to say in the work will also be used.

The code is as follows

Copy Code

<script language= "JavaScript" > function loadjscssfile (filename, filetype) { if (filetype = = "js") { var fileref = document.createelement (' script '); Fileref.setattribute ("type", "Text/javascript"); Fileref.setattribute ("src", filename) else if (filetype = = "css") { var fileref = document.createelement ("link"); Fileref.setattribute ("rel", "stylesheet"); Fileref.setattribute ("type", "text/css"); Fileref.setattribute ("href", filename) } if (typeof fileref!= "undefined") document.getelementsbytagname ("Head") [0].appendchild (FileRef) } Loadjscssfile ("Http://news.163.com/special/0001jt/dblue.css", "CSS"); </

A perfect plug-in can dynamically load JS, and CSS

Updated: 2012.07.13

* Repair queued caused multiple load confusion by definition this.queued

* Change parameters to arrays

Use the method to call Util.load () directly, you can add a callback for each file, or you can add a global callback, as an example:

The code is as follows

Copy Code

[ Util.load ([ ["/misc/js/content.js", function () { Single callback }], ["/misc/js/comment.js"], ["/misc/js/home.js"] ], function () { Global callback }); ] [ var Util = { /** * Global JS List */ Scripts: {}, Head:document.head | | document.getElementsByTagName ("Head") [0] | | Document.documentelement, /** * Asynchronously load JS file */ Load:function (queue, callback) { var self = this, queued = queue.length; for (var i = 0, L = queue.length i < l; i++) { var Elem; Elem = document.createelement ("script"); Elem.setattribute ("type", "Text/javascript"); Elem.setattribute ("Async", "async"); Elem.setattribute ("src", queue[i][0]); The file hasn't been processed yet. if (typeof this.scripts[elem.src] = = "undefined") { Make the onload get the correct elem and index (function (elem, index) { Elem.onload = Elem.onreadystatechange = function () { if (! Elem.readystate | |/loaded|complete/.test (elem.readystate)) { queued--; Troubleshoot IE memory leaks Elem.onload = Elem.onreadystatechange = null; Releasing references Elem = null; Call callback QUEUE[INDEX][1] && queue[index][1] (); Queue all loaded, call final callback if (queued = = 0) { Callback && callback (); } } }; }) (Elem, i); } Processed, calling callback else { queued--; QUEUE[I][1] && queue[i][1] (); } This.head.appendChild (Elem); Queue all loaded, call final callback if (queued = = 0) { Callback && callback (); } } } }; ]

Use examples:

The path is written in the same way as in <script><link>.

/first single file, with callback

The code is as follows	Copy Code
Include ("Js/jquery.js", function () { Alert ("I ' M callback!"); });

Second multiple files, with callbacks

Multiple files are written in an array, and each file can be brought with a callback individually.

The last callback is called after the last file is loaded

The code is as follows	Copy Code
include ([       ["Js/jquery.js", function () {           Alert ("I ' m callback of Jquery.js");      }],       [js/misc.js], function () {   & nbsp;       alert ("I ' m callback of Misc.js");      }],       [Css/style.css, function () {           alert ("I ' m callback of Style.css");      }],       [css/index.css]   ], function ( {       alert ("I ' m the last callback!");   });

There are some problems with the

, which are available for further refinement.