判断在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 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
jquery使用jxl插件导出excel示例
Apr 14 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
JS实现动态添加DOM节点和事件的方法示例
Apr 28 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
基于javascript实现碰撞检测
Mar 12 Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 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获取网络上文件
2006/10/09 PHP
PHP 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
在Python中编写数据库模块的教程
2015/04/29 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
用Django写天气预报查询网站
2018/10/21 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
公司经理任命书
2014/06/05 职场文书
新年寄语2016
2015/08/17 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
餐厅开业活动方案
2019/07/08 职场文书
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server