动态加载js、css的简单实现代码


Posted in Javascript onMay 26, 2016

一、原生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的简单实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Js 冒泡事件阻止实现代码
Jan 27 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
Oct 18 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
Vue实现导航栏的显示开关控制
Nov 01 Javascript
Vue中通过vue-router实现命名视图的问题
Apr 23 Javascript
JS hashMap实例详解
May 26 #Javascript
jQuery验证插件validate使用方法详解
Sep 13 #Javascript
动态加载js、css的实例代码
May 26 #Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 #Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 #Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 #Javascript
jquery分隔Url的param方法(推荐)
May 25 #Javascript
You might like
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
extjs两个tbar问题探讨
2013/08/08 Javascript
首页图片漂浮效果示例代码
2014/06/05 Javascript
node.js超时timeout详解
2014/11/26 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
js实现登录时记住密码的方法分析
2020/04/05 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
pyqt5实现登录界面的模板
2020/05/30 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
python对常见数据类型的遍历解析
2019/08/27 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
生产班组长岗位职责
2014/01/05 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
乐山大佛导游词
2015/02/02 职场文书
大学生自荐书范文
2015/03/05 职场文书
法制教育主题班会
2015/08/13 职场文书
《学会看病》教学反思
2016/02/17 职场文书
2019军训心得体会
2019/06/27 职场文书