JQuery 加載 CSS、JS 文件 - xishuai－IT工程師數位筆記本

文章出處

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