判断在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 相关文章推荐
setInterval 和 setTimeout会产生内存溢出
Feb 15 Javascript
js下用gb2312编码解码实现方法
Dec 31 Javascript
javascript之典型高阶函数应用介绍二
Jan 10 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
node网页分段渲染详解
Sep 05 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 Javascript
JavaScript实现简单计算器
Mar 19 Javascript
Element Notification通知的实现示例
Jul 27 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查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
最短的IE判断代码
2011/03/13 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
2021/02/08 Javascript
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
Python3读取文件常用方法实例分析
2015/05/22 Python
Python的Django框架中的Context使用
2015/07/15 Python
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
详解Pycharm出现out of memory的终极解决方法
2020/03/03 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
外贸采购员岗位职责
2015/04/03 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书