一、原生js:

  1. /**
  2. * 加载js和css文件
  3. * @param jsonData.path 前缀路径
  4. * @param jsonData.url 需要加载的js路径或css路径
  5. * @param jsonData.type 需要加载的类型 js或css
  6. */
  7. function loadWriteFiles(jsonData)
  8. {
  9. jsonData.path = jsonData.path != undefined ? jsonData.path : "";
  10. if(jsonData.type == "js")
  11. {
  12. document.writeln("<script type='text/javascript' src='"+ jsonData.path + jsonData.url+"'></script>");
  13. }
  14. else if(jsonData.type == "css")
  15. {
  16. document.writeln("<link rel='stylesheet' href='"+jsonData.path + jsonData.url+"' type='text/css' />");
  17. }
  18. }
  19.  
  20. /**
  21. * 加载js或css到head中
  22. * @param jsonData.path 前缀路径
  23. * @param jsonData.url 需要加载的js路径或css路径
  24. * @param jsonData.type 需要加载的类型 js或css
  25. */
  26. function loadFilesToHead(jsonData)
  27. {
  28. jsonData.path = jsonData.path != undefined ? jsonData.path : "";
  29. if(jsonData.type == "js")
  30. {
  31. var _js = document.createElement("script");
  32. _js.setAttribute("type", "text/javascript");
  33. _js.setAttribute("src", jsonData.path + jsonData.url);
  34. _js.onload = _js.onreadystatechange=function(){
  35. if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
  36. if("function" == typeof(jsonData["callback"]) && jsonData["callback"]){
  37. jsonData["callback"].call(this);
  38. }
  39. }
  40. _js.onload=_js.onreadystatechange=null;
  41. }
  42. document.getElementsByTagName("head")[0].appendChild(_js);//追加到head标签内
  43. }
  44. else if(jsonData.type == "css")
  45. {
  46. var _css = document.createElement("link");
  47. _js.setAttribute("type", "text/css");
  48. _css.setAttribute("rel", "stylesheet");
  49. _css.setAttribute("href", jsonData.path + jsonData.url);
  50. document.getElementsByTagName("head")[0].appendChild(_css);//追加到head标签内
  51. }
  52. }

二、jquery版本:

采用deferred对象返回结果

  1. var uiLoad = uiLoad || {};
  2.  
  3. (function($, $document, uiLoad) {
  4. "use strict";
  5.  
  6. var loaded = [],
  7. promise = false,
  8. deferred = $.Deferred();
  9.  
  10. uiLoad.load = function (srcs) {
  11. srcs = $.isArray(srcs) ? srcs : srcs.split(/\s+/);
  12. if(!promise){
  13. promise = deferred.promise();
  14. }
  15.  
  16. $.each(srcs, function(index, src) {
  17. promise = promise.then( function(){
  18. return src.indexOf('.css') >=0 ? loadCSS(src) : loadScript(src);
  19. } );
  20. });
  21. deferred.resolve();
  22. return promise;
  23. };
  24.  
  25. var loadScript = function (src) {
  26. if(loaded[src]) return loaded[src].promise();
  27.  
  28. var deferred = $.Deferred();
  29. var script = $document.createElement('script');
  30. script.src = src;
  31. script.onload = function (e) {
  32. deferred.resolve(e);
  33. };
  34. script.onerror = function (e) {
  35. deferred.reject(e);
  36. };
  37. $document.body.appendChild(script);
  38. loaded[src] = deferred;
  39.  
  40. return deferred.promise();
  41. };
  42.  
  43. var loadCSS = function (href) {
  44. if(loaded[href]) return loaded[href].promise();
  45.  
  46. var deferred = $.Deferred();
  47. var style = $document.createElement('link');
  48. style.rel = 'stylesheet';
  49. style.type = 'text/css';
  50. style.href = href;
  51. style.onload = function (e) {
  52. deferred.resolve(e);
  53. };
  54. style.onerror = function (e) {
  55. deferred.reject(e);
  56. };
  57. $document.head.appendChild(style);
  58. loaded[href] = deferred;
  59.  
  60. return deferred.promise();
  61. }
  62.  
  63. })(jQuery, document, uiLoad);

动态加载js、css 代码的更多相关文章

  1. 动态加载js css 插件

    简介 动态加载js,css在现在以及将来肯定是很重要的.目前来看前端代码编写的业务量已经远远超过后端编写的.随着对用户体验度逐渐增强,前端业务复杂,加载速度变得很慢很慢.为了解决这个问题,目前出现的两 ...

  2. 页面加载异常 清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍,防止浏览器缓存

    js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法   一.CSS和 ...

  3. js动态加载js css文件,可以配置文件后辍,防止浏览器缓存

    js的引用,在浏览器,或微信上访问经常会遇到文件改了,但就是没有更新的问题,使用此函数可以轻松解决缓存问题只需要把js的引用方式改为使用此函数加载即可 源码如下: /** * js动态加载js css ...

  4. 动态加载js,css

    今天项目中需要用到动态加载 CSS 文件,经过一番折腾终于搞定,回家整理了一下,顺便融合了动态加载 JS 的功能写成了一个对象,先上代码: var dynamicLoading = { css: fu ...

  5. 动态加载js,css(项目中需要的)

    最近做的一个项目需要加入百度统计,大家都知道百度统计在页面引用就是一坨js,实现方法很简单引用到页面就ok了. 那么问题来了,虽然我不知道百度统计的原理是啥,我的测试服引用了百度统计,百度统计账号里面 ...

  6. jquery动态加载js/css文件方法

    先来看jquery自带的getSrcript文件 方法 代码如下 复制代码 $.getScript(url,callback) 实例 代码如下 复制代码 var testVar = 'New JS l ...

  7. JS动态加载 js css

    1.动态加载js function loadScript( url ){ var script = document.createElement( "script" ); scri ...

  8. 动态加载js和css

    开发过程中经常需要动态加载js和css,今天特意总结了一下常用的方法. 1.动态加载js 方法一:动态加载js文件 // 动态加载js脚本文件 function loadScript(url) { v ...

  9. 动态加载js和css的jquery plugin

    一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件. //how to use the function below: //$.include ...

  10. 三种动态加载js的jquery实例代码另附去除js方法

    !-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...

随机推荐

  1. vijosP1115 火星人

    vijosP1115 火星人 链接:https://vijos.org/p/1115 [思路] 排列组合. 题目要求为求第下m个排列. 这里有两种方法,首选的是调用algorithm中的next_pe ...

  2. 可在Azure上运行.NET的SDK

    本节包含前几个版本的 for .NET 的发行说明.有关早期版本的详细信息,请参阅早期版本:Azure SDK for .NET.有关 SDK 支持和停用的信息,请参阅 Azure SDK for . ...

  3. 《Concrete Mathematics》-chaper5-二项式系数

    二项式系数,也是我们常用的组合数,最直观的组合意义就是从n个元素取k个元素所有可能的情况数,因此我们自然的得到下面二项式系数的定义式. 那么我们通过具有组合意义的二项系数,给出更加一般的二项式系数的定 ...

  4. Codeforces Round #226 (Div. 2)C. Bear and Prime Numbers

    /* 可以在筛选质数的同时,算出每组数据中能被各个质数整除的个数, 然后算出[0,s]的个数 [l,r] 的个数即为[0,r]的个数减去[0,l]个数. */ #include <stdio.h ...

  5. Qt5.0.2无法发布问题

    先从bin目录里面找到所缺失的dll,如果出现 可以找到libEGL.dll然后复制过来就可以了.

  6. 杀死当前Excel进程

    说明: 代码编写过程中,有时需要杀死当前Excel进程,而不影响其他Excel进程. 代码如下: 添加引用: //杀死当前进程的API引用 using System.Runtime.InteropSe ...

  7. 如何用Java进行3DES加密解

    原文地址: http://weavesky.com/2008/01/05/java-3des/ 最近一个合作商提出使用3DES交换数据,本来他们有现成的代码,可惜只有.net版本,我们的服务器都是Li ...

  8. Mac RTX

    http://bbs.weiphone.com/read-htm-tid-1876850.html 公司的rtx还是2010的,如果是2011的就有mac版的了.直接到官网下. 那还是用2010的,尼 ...

  9. [Javascript] Gradient Fills on the HTML5 Canvas

    window.onload = function() { var canvas = document.getElementById("canvas"), context = can ...

  10. 深入理解Linux操作系统守护进程的意义

    Linux服务器在启动时需要启动很多系统服务,它们向本地和网络用户提供了Linux的系统功能接口,直接面向应用程序和用户.提供这些服务的程序是由运行在后台的守护进程(daemons)来执行的.守护进程 ...