判断在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 面向对象 命名空间
May 13 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
JavaScript实现页面5秒后自动跳转的方法
Apr 16 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
vue实现tab栏点击高亮效果
Aug 19 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
PHP下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
PHP后台微信支付和支付宝支付开发
2017/04/28 PHP
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
2020/05/09 Javascript
Python中使用PIPE操作Linux管道
2015/02/04 Python
Python3搜索及替换文件中文本的方法
2015/05/22 Python
Python中几种导入模块的方式总结
2017/04/27 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
英国现代市场:ARKET
2019/04/10 全球购物
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
财务经理岗位职责
2013/11/09 职场文书
事业单位请假制度
2014/01/13 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
公司周年庆典标语
2014/10/07 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
小学毕业感言100字
2015/07/30 职场文书
高一语文教学反思
2016/02/16 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
Hive日期格式转换方法总结
2022/06/25 数据库