JS 方式加载 CSS、JS 文件:
//加载 css 文件function includeCss(filename) { var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.href = filename; link.rel = 'stylesheet'; link.type = 'text/css'; head.appendChild(link)}//加载 js 文件function includeJs(filename) { var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = filename; script.type = 'text/javascript'; head.appendChild(script)}
上面这种方式很简单,但也会出现一些问题,比如加载 JS 文件之后,需要执行 JS 内的方法,这时候偶尔会找不到方法执行,因为可能加载 JS 文件的时候,网络卡掉了,所以,需要换种方式加载,必须在加载 JS 文件完成之后,执行 JS 内部方法。
JQuery 加载 CSS 文件:
$("head").append(" ");var css = $("head").children(":last");css.attr({ rel: "stylesheet", type: "text/css", href: "address_of_your_css"});
Jquery 加载 JS 文件,有两种方式:
$.ajax({ url: "js file", dataType: "script", cache: true, success: function () { //todo }});$.getScript('js file', function () { //todo});
上面两种方式都可以,并且都是在加载 JS 文件之后,再执行 JS 内部的方法(不会出现找不到方法执行错误),第二种会更简单些。
那如果我们需要加载多个 JS 文件呢?
$.when( $.getScript( "/mypath/myscript1.js" ), $.getScript( "/mypath/myscript2.js" ), $.getScript( "/mypath/myscript3.js" ), $.Deferred(function(deferred){ $(deferred.resolve); })).done(function(){ //place your code here, the scripts are all loaded});
如果需要多次调用,也可以抽离出方法:
//定义$.getMultiScripts = function(arr, path) { var _arr = $.map(arr, function(scr) { return $.getScript( (path||"") + scr ); }); _arr.push($.Deferred(function( deferred ){ $( deferred.resolve ); })); return $.when.apply($, _arr);}//调用var script_arr = [ 'myscript1.js', 'myscript2.js', 'myscript3.js'];$.getMultiScripts(script_arr, '/mypath/').done(function() { // all scripts loaded});
参考资料: