判断在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 相关文章推荐
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
JavaScript伪数组用法实例分析
Dec 22 Javascript
微信小程序实现留言板
Oct 31 Javascript
layer弹出层自定义提交取消按钮的例子
Sep 10 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
Vue关于组件化开发知识点详解
May 13 Javascript
vue移动端的左右滑动事件详解
Jun 17 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操作MongoDB的技术总结
2013/06/02 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
Javascript 按位取反运算符 (~)
2014/02/04 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
2015/03/04 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
vue-cli配置文件——config篇
2018/01/04 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
JavaScript实现音乐导航效果
2020/11/19 Javascript
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
python if not in 多条件判断代码
2016/09/21 Python
python数据封装json格式数据
2018/03/04 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
党员个人思想汇报
2013/12/28 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
教师师德演讲稿
2014/05/06 职场文书
考试作弊检讨
2015/01/27 职场文书
国际贸易实训总结
2015/08/03 职场文书
快速学习Oracle触发器和游标
2021/06/30 Oracle