動(dòng)態(tài)加載js、css的實(shí)例代碼

    這篇文章主要介紹了動(dòng)態(tài)加載js、css的實(shí)例代碼的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起看看吧
    一、原生js：
    /**
    * 加載js和css文件
    * @param jsonData.path 前綴路徑
    * @param jsonData.url 需要加載的js路徑或css路徑
    * @param jsonData.type 需要加載的類型 js或css
    */
    function loadWriteFiles(jsonData)
    {
    jsonData.path = jsonData.path != undefined ? jsonData.path : "";
    if(jsonData.type == "js")
    {
    document.writeln("<script type='text/javascript' src='"+ jsonData.path + jsonData.url+"'></script>");
    }
    else if(jsonData.type == "css")
    {
    document.writeln("<link rel='stylesheet' href='"+jsonData.path + jsonData.url+"' type='text/css' />");
    }
    }
    /**
    * 加載js或css到head中
    * @param jsonData.path 前綴路徑
    * @param jsonData.url 需要加載的js路徑或css路徑
    * @param jsonData.type 需要加載的類型 js或css
    */
    function loadFilesToHead(jsonData)
    {
    jsonData.path = jsonData.path != undefined ? jsonData.path : "";
    if(jsonData.type == "js")
    {
    var _js = document.createElement("script");
    _js.setAttribute("type", "text/javascript");
    _js.setAttribute("src", jsonData.path + jsonData.url);
    _js.onload = _js.onreadystatechange=function(){
    if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
    if("function" == typeof(jsonData["callback"]) && jsonData["callback"]){
    jsonData["callback"].call(this);
    }
    }
    _js.onload=_js.onreadystatechange=null;
    }
    document.getElementsByTagName("head")[].appendChild(_js);//追加到head標(biāo)簽內(nèi)
    }
    else if(jsonData.type == "css")
    {
    var _css = document.createElement("link");
    _js.setAttribute("type", "text/css");
    _css.setAttribute("rel", "stylesheet");
    _css.setAttribute("href", jsonData.path + jsonData.url);
    document.getElementsByTagName("head")[].appendChild(_css);//追加到head標(biāo)簽內(nèi)
    }
    }
    二、jquery版本：
    采用deferred對(duì)象返回結(jié)果
    var uiLoad = uiLoad || {};
    (function($, $document, uiLoad) {
    "use strict";
    var loaded = [],
    promise = false,
    deferred = $.Deferred();
    uiLoad.load = function (srcs) {
    srcs = $.isArray(srcs) ? srcs : srcs.split(/\s+/);
    if(!promise){
    promise = deferred.promise();
    }
    $.each(srcs, function(index, src) {
    promise = promise.then( function(){
    return src.indexOf('.css') >= ? loadCSS(src) : loadScript(src);
    } );
    });
    deferred.resolve();
    return promise;
    };
    var loadScript = function (src) {
    if(loaded[src]) return loaded[src].promise();
    var deferred = $.Deferred();
    var script = $document.createElement('script');
    script.src = src;
    script.onload = function (e) {
    deferred.resolve(e);
    };
    script.onerror = function (e) {
    deferred.reject(e);
    };
    $document.body.appendChild(script);
    loaded[src] = deferred;
    return deferred.promise();
    };
    var loadCSS = function (href) {
    if(loaded[href]) return loaded[href].promise();
    var deferred = $.Deferred();
    var style = $document.createElement('link');
    style.rel = 'stylesheet';
    style.type = 'text/css';
    style.href = href;
    style.onload = function (e) {
    deferred.resolve(e);
    };
    style.onerror = function (e) {
    deferred.reject(e);
    };
    $document.head.appendChild(style);
    loaded[href] = deferred;
    return deferred.promise();
    }
    })(jQuery, document, uiLoad);
    以上所述是小編給大家介紹的動(dòng)態(tài)加載js、css的實(shí)例代碼，希望對(duì)大家有所幫助！