下面小编就为大家带来一篇动态加载js、css的简单实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。

一、原生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")[0].appendChild(_js);//追加到head标签内

       }

       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")[0].appendChild(_css);//追加到head标签内

       }

     }

二、jquery版本：

采用deferred对象返回结果

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') >=0 ? 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);

以上这篇动态加载js、css的简单实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考