在css加载完毕后自动判断页面是否加入css或js文件


Posted in Javascript onSeptember 10, 2014

最近在写项目的framework,写个JQueryMessageBox的类,以使用jquery ui中的dialog()来显示消息框,为了使方法方便调用,便加入了自动判断页面是否加入了ui.js和ui.css,代码如下:

//如果没有包含ui.js,则引用 
if ($('script[src$=""jquery-ui-1.8.11.custom.min.js""]').length == 0) {{ 
$(""<script src='/js/jquery-ui-1.8.11.custom.min.js' type='text/javascript' />"").appendTo('head'); 
}} 
//如果没有加载css,则加载 
if ($('link[ref$=""jquery-ui-1.8.14.custom.css""]').length == 0) {{ 
$('<link href=""/css/jquery-ui-1.8.14.custom.css"" rel=""stylesheet"" type=""text/css"" />').appendTo('head'); 

//dialog() script 
}}

但CSS代码不会立即加载下来,于是在显示dialog的时候则不会有样式(在IE9下可以,因为在IE9下CSS即使后下载下来,也会重新绘制页面元素,而IE8则不会).解决此问题的方法,可以使用ajax,当css加载完毕后,再显示dialog,这样就可以带着样式显示出来了,代码如下:

if ($('link[ref$=""jquery-ui-1.8.14.custom.css""]').length == 0) { 
$.ajax({ 
url: '/css/jquery-ui-1.8.14.custom.css', 
success: function(data) { 
//创建一个style元素,并追加到head中 
//替换其中images的路径 
$('<style type="text/css">' + data.replace(/url\(images/g, 'url(/css/images') + '</style>').appendTo('head'); 
//dialog() script; 
} 
}); 
} 
else { 
//dialog() script; 
}
Javascript 相关文章推荐
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
javascript中&quot;/&quot;运算符常见错误
Oct 13 Javascript
jquery()函数的三种语法介绍
Oct 09 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 Javascript
Node.js 深度调试方法解析
Jul 28 Javascript
vue设置全局访问接口API地址操作
Aug 14 Javascript
js+css3实现简单时钟特效
Sep 13 Javascript
angular *Ngif else用法详解
Dec 15 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 #Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 #Javascript
javascipt:filter过滤介绍及使用
Sep 10 #Javascript
用javascript将数据导入Excel示例代码
Sep 10 #Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 #Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
Sep 09 #Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 #Javascript
You might like
php中利用explode函数分割字符串到数组
2014/02/08 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
2012/09/30 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
[05:24]TI9采访——教练
2019/08/24 DOTA
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
python模块smtplib学习
2018/05/22 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
经济系大学生求职信
2013/10/01 职场文书
仓库班组长岗位职责
2013/12/12 职场文书
医院总经理岗位职责
2014/02/04 职场文书
祖国在我心中的演讲稿
2014/05/04 职场文书
中班下学期个人总结
2015/02/12 职场文书
体检通知范文
2015/04/21 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript