在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 相关文章推荐
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 Javascript
js取得url地址参数实例
Feb 22 Javascript
jQuery中map()方法用法实例
Jan 06 Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 Javascript
js实现下拉框效果(select)
Mar 28 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 Javascript
详解webpack 热更新优化
Sep 13 Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 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
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
PHP学习记录之数组函数
2018/06/01 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
Extjs4中的分页应用结合前后台
2013/12/13 Javascript
js命名空间写法示例
2015/12/18 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
vue-cli配置文件——config篇
2018/01/04 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
vue登录注册实例详解
2019/09/14 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
python中urllib模块用法实例详解
2014/11/19 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
python实现简单登陆流程的方法
2018/04/22 Python
python 读取目录下csv文件并绘制曲线v111的方法
2018/07/06 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
python实现文件助手中查看微信撤回消息
2019/04/29 Python
Python API len函数操作过程解析
2020/03/05 Python
Python高并发和多线程有什么关系
2020/11/14 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
中国高端家电购物商城:顺电
2018/03/04 全球购物
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
护理专业个人求职简历的自我评价
2013/10/13 职场文书
学生党员思想汇报范文
2014/01/09 职场文书
小学数学教学反思
2014/02/02 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL