判断在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 相关文章推荐
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
js 事件处理函数间的Event物件是否全等
Apr 08 Javascript
jQuery实现长文字部分显示代码
May 13 Javascript
JS简单的轮播的图片滚动实例
Jun 17 Javascript
html向js方法传递参数具体实现
Aug 08 Javascript
jQuery获取上传文件的名称的正则表达式
May 21 Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
vue实现键盘输入支付密码功能
Aug 18 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
实用Javascript调试技巧分享(小结)
Jun 18 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 mvc开发模式的感想
2011/06/28 PHP
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
2014/02/28 Javascript
js this函数调用无需再次抓获id,name或标签名
2014/03/03 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
python微信撤回监测代码
2019/04/29 Python
python语言元素知识点详解
2019/05/15 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
个人实用的自我评价范文
2013/11/23 职场文书
员工培训心得体会
2013/12/30 职场文书
机关门卫制度
2014/02/01 职场文书
四查四看剖析材料
2014/02/14 职场文书
环保口号大全
2014/06/12 职场文书
经费申请报告
2015/05/15 职场文书
四风之害观后感
2015/06/09 职场文书
详解Redis复制原理
2021/06/04 Redis
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL