Dynamic loading of JS, CSS instance code _javascript skills

First, native JS:

/** * Load JS and css file * @param jsondata.path prefix path * @param jsondata.url need to load the JS path or CSS path * @param jsondata.type type JS or CSS required to load
* * Function Loadwritefiles (jsondata) {Jsondata.path = Jsondata.path!= undefined? Jsondata.path: ""; if (Jsondata.type = = "js") {Document.writeln ("<script type= ' text/javascript ' src= '" "+ Jsondata.path + jsonData.url+" "
></script> "); else if (Jsondata.type = = "css") {Document.writeln ("<link rel= ' stylesheet ' href= '" "+jsondata.path + jsondata.url+" "t
Ype= ' text/css '/> "); }/** * Load JS or CSS into head * @param jsondata.path prefix path * @param jsondata.url need to load the JS path or CSS path * @param jsondata.type type that needs to be loaded
JS or CSS */function Loadfilestohead (jsondata) {Jsondata.path = Jsondata.path!= undefined? Jsondata.path: ""; if (Jsondata.type = = "js") {var _js = document.createelement ("script"); _js.setattribute ("type", "Text/javascript"); _js
. setattribute ("src", Jsondata.path + Jsondata.url); _js.onload = _js.onreadystatechange=function () {if (!this.readystate| | This.readystate== ' Loaded ' | |
this.readystate== ' complete ') {if ("function" = = typeof (jsondata["callback"]) && jsondata["callback"]) {
Jsondata["Callback"].call (this); 
}} _js.onload=_js.onreadystatechange=null; } document.getelementsbytagname ("Head") [].appendchild (_JS);//Append to head tab} else if (Jsondata.type = = "css") {var _css = do
Cument.createelement ("link");
_js.setattribute ("type", "text/css");
_css.setattribute ("rel", "stylesheet");
_css.setattribute ("href", Jsondata.path + Jsondata.url);  document.getElementsByTagName ("Head") [].appendchild (_CSS);//Append to head tag}}

Two, jquery version:

Return result with deferred object

var uiload = Uiload | |
{}; (Function ($, $document, uiload) {"Use strict"; var loaded = [], promise = false, deferred = $.
Deferred (); Uiload.load = function (SRCS) {SRCs = $.isarray (SRCS) srcs:srcs.split (/\s+/); if (!promise) {promise = Deferred.promis
E (); } $.each (SRCs, function (index, SRC) {promise = Promise.then (function () {return Src.indexof ('. css ') >=? Loadcss (SRC)
: Loadscript (SRC);
} );
});
Deferred.resolve ();
return promise;
}; var loadscript = function (src) {if (loaded[src]) return loaded[src].promise (); var deferred = $.
Deferred ();
var script = $document. createelement (' script ');
SCRIPT.SRC = src;
Script.onload = function (e) {deferred.resolve (e);};
Script.onerror = function (e) {deferred.reject (e);};
$document. Body.appendchild (script);
LOADED[SRC] = deferred;
return Deferred.promise ();
}; var loadcss = function (href) {if (Loaded[href]) return loaded[href].promise (); var deferred = $.
Deferred ();
var style = $document. createelement (' link '); Style.rel = ' StyleshEET ';
Style.type = ' text/css ';
style.href = href;
Style.onload = function (e) {deferred.resolve (e);};
Style.onerror = function (e) {deferred.reject (e);};
$document. Head.appendchild (style);
Loaded[href] = deferred;
return Deferred.promise (); }) (JQuery, document, Uiload);

The above is a small series to introduce the dynamic loading of JS, css instance code, I hope to help you!