判断在css加载完毕后执行后续代码示例


Posted in Javascript onSeptember 03, 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代码规范
Mar 08 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
Jun 16 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 Javascript
Electron-vue脚手架改造vue项目的方法
Oct 22 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
小程序中canvas的drawImage方法参数使用详解
Jul 04 Javascript
openLayer4实现动态改变标注图标
Aug 17 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 #Javascript
jQuery自带的一些常用方法总结
Sep 03 #Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 #Javascript
JavaScript实现找出数组中最长的连续数字序列
Sep 03 #Javascript
js实现的类似于asp数据字典的数据类型代码实例
Sep 03 #Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 #Javascript
Egret引擎开发指南之视觉编程
Sep 03 #Javascript
You might like
基于CI框架的微信网页授权库示例
2016/11/25 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
Js callBack 返回前一页的js方法
2008/11/30 Javascript
javascript fullscreen全屏实现代码
2009/04/09 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
将json转换成struts参数的方法
2016/11/08 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
使用Python获取Linux系统的各种信息
2014/07/10 Python
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
Python实现计算最小编辑距离
2016/03/17 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
django query模块
2019/04/20 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
浅析PEP572: 海象运算符
2019/10/15 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
python3注册全局热键的实现
2020/03/22 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
Python切片列表字符串如何实现切换
2020/08/06 Python
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
音乐教学案例
2014/01/30 职场文书
医学求职信
2014/05/28 职场文书
教师求职自荐书
2014/06/14 职场文书
中药学自荐信
2014/06/15 职场文书
企业公益活动策划方案
2014/08/24 职场文书
走群众路线学习笔记
2014/11/06 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技