原创内容,转载请注明出处!

为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护。所以我用js写了以下方法,存放在“sourceController.js”文件内。

/**
* Created by MingChen on 2016/11/3.
*/
function sourceController() {
this.root = ""; this.callfunc = null; // 回调函数 this.css = []; this.script = []; // css数量,兼容safari用
var cssCount = document.styleSheets.length; // timeOut
var tmpTimeOut = []; // 时间戳
var startTime = null; /**
* 设置文件根目录
* @param url 根目录地址
*/
this.setRoot = function (url) {
this.root = url;
}; /**
* 设置回调函数
* @param func 回调函数
*/
this.setCallBack = function (func) {
this.callfunc = func;
}; /** 添加Script文件 请在addSource钱调用
* @param url script文件路径
*/
this.addScript = function (url) {
if (url === "" || url == null) return;
this.script.push(url);
}; /**
* 添加CSS文件 请在addSource钱调用
* @param url css文件路径
*/
this.addCss = function (url) {
if (url === "" || url == null) return;
// console.log("csslength:" + this.css.length);
this.css.push(url);
}; /** 添加常用资源 */
this.addSource = function () {
addMeta([["name", "renderer"], ["content", "ie-comp"]]); createCss(this);
}; /**
* 添加<link> 默认先加载css
* @param obj 当前对象
*/
function createCss(obj) {
// 如果没有css文件,不加载
if (obj.css.length <= 0) return;
var url = obj.css.shift();
// console.log(url);
var css = document.createElement("link");
css.setAttribute("rel", "stylesheet");
if (obj.root != "") {
url = obj.root + "/" + url;
}
css.href = url; // 老版本safari特殊处理,获取浏览器信息的方法请自己添加
if (browserInfo().browser == "safari" && parseInt(browserInfo().version) < 6) {
var timer = setInterval(function () {
// console.log("timer cssCount:" + cssCount + " len:" + document.styleSheets.length);
clearTmpTimeOut();
if (document.styleSheets.length == cssCount && obj.css.length > 0) {
addTask(createCss, 0, obj);
} else if (document.styleSheets.length == cssCount) {
// 如果有js文件,开始加载js
if (obj.script.length > 0) {
addTask(createJs, 0, obj);
} else {
obj.css.length = 0;
if (typeof obj.callfunc == "function") {
obj.callfunc();
}
}
clearInterval(timer);
}
}, 50);
} else {
css.onload = function () {
clearTmpTimeOut();
if (obj.css.length > 0) {
addTask(createCss, 0, obj);
} else {
// 如果有js文件,开始加载js
if (obj.script.length > 0) {
addTask(createJs, 0, obj);
} else {
tmpTimeOut.length = 0;
obj.css.length = 0;
if (typeof obj.callfunc == "function") {
obj.callfunc();
}
}
}
};
}
document.getElementsByTagName("head")[0].appendChild(css);
cssCount++;
} /**
* 添加<script> js加载完后执行回调函数
* @param obj 当前对象
*/
function createJs(obj) {
// 如果没有js文件,不加载
if (obj.script.length <= 0) return;
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', (obj.root) ? (obj.root + "/" + obj.script.shift()) : (obj.script.shift()));
script.onload = script.onreadystatechange = function () {
if (script.ready) {
return false;
}
if (!script.readyState || script.readyState == "loaded" || script.readyState == 'complete') {
script.onload = script.onreadystatechange = null;
script.ready = true;
clearTmpTimeOut();
// console.log("time:" + (new Date().getTime() - startTime) + "ms " + script.getAttribute("src")); if (obj.script.length > 0) {
addTask(createJs, 0, obj);
} else {
tmpTimeOut.length = 0;
obj.script.length = 0;
// 如果有回调函数 执行回调函数
if (typeof obj.callfunc == "function") {
obj.callfunc();
}
}
}
};
startTime = new Date().getTime();
document.getElementsByTagName("body")[0].appendChild(script);
} /**
*添加一个任务,
* @param {Function} fun 任务函数名
* @param {number} delay 定时时间
* @param {object} params 传递到fun中的参数
*/
function addTask(fun, delay) {
var to = null;
if (typeof fun == 'function') {
var argu = Array.prototype.slice.call(arguments, 2);
var f = (function () {
fun.apply(null, argu);
});
to = window.setTimeout(f, delay);
tmpTimeOut.push(to);
return to;
}
to = window.setTimeout(fun, delay);
tmpTimeOut.push(to);
} // 清空加载计时器
function clearTmpTimeOut() {
while (tmpTimeOut.length > 0){
var tto = tmpTimeOut.shift();
window.clearTimeout(tto);
tmpTimeOut.length = 0;
}
}
}

设置资源路径管理文件config.js。

/**
* Created by MingChen on 2016/10/25.
*/
var sourcePath = {
"iconfont": "css/iconfont/iconfont.css",
"jquery": 'javascript/libs/jquery/jquery.js',
"pieJS": "javascript/libs/PIEJS/PIE.js",
"data": "javascript/publicData.js",
// jquery-ui
"cjqueryui": "css/jquery-ui.css",
"jqueryui": 'javascript/libs/jquery/jquery-ui-1.11.4.js',
// jqgrid
"cjqgrid": "javascript/libs/jqgrid/ui.jqgrid.css",
"jqgridcn": "javascript/libs/jqgrid/grid.locale-cn.js",
"jqgrid": "javascript/libs/jqgrid/jquery.jqGrid.js",
// common
"ccommon": "css/common.css",
"common": "javascript/common.js",
// header
"cheader": "javascript/libs/headerMenu/css/headerMenu.css",
"header": "javascript/libs/headerMenu/js/headerMenu.js",
// circle
"circle": "javascript/libs/raphael/cycle.js",
"circleBar": "javascript/libs/raphael/raphael.js",
// search
"csearch": "javascript/libs/searchForm/css/searchForm.css",
"search": "javascript/libs/searchForm/js/searchForm.js",
// datePicker
"datePicker": "javascript/libs/My97DatePicker/WdatePicker.js",
// select2
"cselect2": "javascript/libs/select2/css/select2.min.css",
"select2min": "javascript/libs/select2/js/select2.min.js",
"select2Func": "javascript/libs/select2/js/select2Func.js",
// validator
"cvalidator": "javascript/libs/validation/css/jqvForm.css",
"validator": "javascript/libs/validation/js/jquery.validate.js",
// dialog
"cdialog": "javascript/libs/dialogBox/css/dialogBox.css",
"dialog": "javascript/libs/dialogBox/js/dialogBoxUtils.js",
// layer
"clayer": "javascript/libs/layer/skin/layer.css",
"layer": "javascript/libs/layer/layer.js"
};

在需要引入的页面只需要在<head>加入如下代码就可以一下子引入所有的常用资源了。为了显示美观在所有布局完成之间body设置visibility为hidden,布局完成后显示出来。

window.onload = function(){
var sc = new sourceController();
sc.setRoot("根目录地址");
sc.css = [sourcePath.cjqueryui, sourcePath.cjqgrid];
sc.script = [sourcePath.common, sourcePath.jquery, sourcePath.jqueryui, sourcePath.jqgrid];
if(判断条件) // 根据需要额外添加的文件{
sc.addCss("css/index.css"); // 额外添加的css文件,必须在加载资源之前加入
sc.addScript("javaScript/index.js"); // 额外添加的js文件,必须在加载资源之前加入
}
sc.setCallBack(function(){
document.body.style.display = "block"; // 显示body
});
sc.addSource(); // 加载常用的js和css文件
};

常用js,css文件统一加载方法,并在加载之后调用回调函数的更多相关文章

  1. [文章存档]Azure .net WebAPP的js/css文件过大导致访问慢的解决办法

    https://docs.azure.cn/zh-cn/articles/azure-operations-guide/app-service-web/aog-app-service-web-qa-j ...

  2. nginx设置反向代理后,页面上的js css文件无法加载

    问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:j ...

  3. nginx设置反向代理后端jenklins,页面上的js css文件无法加载

    转载 2017年06月14日 22:36:59 8485 问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2 ...

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

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

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

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

  6. nginx反向代理转发后页面上的js css文件无法加载【原创】

    故障现象:nginx做代理转发后,发现页面上的js css文件无法加载,页面样式乱了. 原因:没有配置静态资源 解决js css文件无法加载无法访问的问题 解决办法: 修改配置文件nginx.conf ...

  7. javascript异步延时加载及判断是否已加载js/css文件

    <html> <head> <script type="text/javascript"> /**======================= ...

  8. SpringMVC里静态网页不能加载到.js .css文件的问题

    在写SpringMVC项目时候,写的js css文件打不开,网上查了一下,解决办法: 在web.xml里面: <servlet> <servlet-name>dispatche ...

  9. iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ

    iOS之在webView中引入本地html,image,js,css文件的方法   2014-12-08 20:00:16CSDN-sky_2016-点击数:10292     项目需求 最近开发的项 ...

  10. Web性能优化之动态合并JS/CSS文件并缓存客户端

    来源:微信公众号CodeL 在Web开发过程中,会产生很多的js/css文件,传统的引用外部文件的方式会产生多次的http请求,从而加重服务器负担且网页加载缓慢,如何在一次请求中将多个文件一次加载出来 ...

随机推荐

  1. SQL Server代理警报

    使用SQL Server代理警报的前提条件1.创建操作员,接收消息的用户2.创建警报,满足某种条件触发警报,并作出响应(执行作业或/和通知操作员)3.配置数据库邮件,用于发送消息通知4.SQL Ser ...

  2. 实用命令dd

    1.命令简介 dd 的主要选项: 指定数字的地方若以下列字符结尾乘以相应的数字: b=512, c=1, k=1024, w=2, xm=number m if=file #输入文件名,缺省为标准输入 ...

  3. PHP js使用ajax异步处理方式请求PHP,解决数组中文乱码

    html端: <html> <head> <script type="text/javascript" src="jquery/jquery ...

  4. 11.写一个函数,尽可能高效的,从一个标准 url 里取出文件的扩展名

    //首先列出需要被操作的url     $url_path = "http://www.sina.com.cn/abc/de/fg.php?id=1";     方法一:     ...

  5. cpp异常详解

    1. 异常介绍 在函数在执行过程中如果碰到对错误的处理可以有两种方式, 1. 返回错误,2. 使用异常. 如果作为函数的调用者想要知道具体的错误信息, 就需要维护一套错误列表, 或者用string类型 ...

  6. javascript中的自增与自减

    一直都对自增与自减的执行顺序有点糊涂,今天查了资料,来总结一下 a++(a--),就是指当时计算a,当下一次使用这个变量的时候才执行++或者-- ++a(--a),就是指当时就计算++或者-- 例1: ...

  7. 修改 MyEclipse 中的 jsp 和 servlet 模板

    找到  MyEclipse/Common/plugins/com.genuitec.eclipse.wizards_9.0.0.me201211011550.jar 这个文件(wizards后面的数字 ...

  8. mysql常用操作语句(转)

      mysql -u root -p mysql -h localhost -u root -p database_name 2.列出数据库: show databases; 3.选择数据库: use ...

  9. python学习笔记七 初识socket(进阶篇)

    socket socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. sock ...

  10. PHP 用户登录与退出

    PHP 用户登录与退出 登录页面 login.html 负责收集用户填写的登录信息. <fieldset> <legend>用户登录</legend> <fo ...