JQuery 加载 CSS、JS 文件

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("<link>"); 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 });

参考资料：

Load external css file like scripts in jquery which is compatible in ie also

How to include multiple js files using jQuery $.getScript() method