判断在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 相关文章推荐
根据分辩率调用不同的CSS.
Jan 08 Javascript
JS 常用校验函数
Mar 26 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
jQuery中delegate()方法用法实例
Jan 19 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
Mar 04 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 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
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
php中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
JavaScript修改css样式style
2008/04/15 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
Python中使用dom模块生成XML文件示例
2015/04/05 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
个人简历中的自我评价范例
2013/10/29 职场文书
房屋过户委托书范本
2014/10/07 职场文书
春节晚会开场白
2015/05/29 职场文书
医院见习总结
2015/06/24 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫