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

本文转自田园里的蟋蟀博客园博客，原文链接：http://www.cnblogs.com/xishuai/p/jquery-load-css-and-js-file.html，如需转载请自行联系原作者