判断在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 相关文章推荐
js 数组克隆方法 小结
Mar 20 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
JS中处理与当前时间间隔的函数代码
May 23 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 Javascript
jquery datatable服务端分页
Aug 31 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 Javascript
JS实现简单移动端鼠标拖拽
Jul 23 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
set_include_path在win和linux下的区别
2008/01/10 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python迭代器的使用方法实例
2013/11/21 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
使用python存储网页上的图片实例
2018/05/22 Python
Python数据集切分实例
2018/12/08 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
python将字母转化为数字实例方法
2019/10/04 Python
Python 文件数据读写的具体实现
2020/01/24 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
python软件都是免费的吗
2020/06/18 Python
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
奶茶专卖店创业计划书
2014/01/18 职场文书
综合内勤岗位职责
2014/04/14 职场文书
保护校园环境倡议书
2015/04/28 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
如何用python绘制雷达图
2021/04/24 Python
Python pygame实现中国象棋单机版源码
2021/06/20 Python
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers