JQuery 加载 CSS、JS 文件

时间：2022-01-11 18:08:23

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

});

参考资料：

相关文章