判断在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 相关文章推荐
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
Oct 14 Javascript
基于Angularjs实现分页功能
May 30 Javascript
js实现时间轴自动排列效果
Mar 09 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
vue登录路由验证的实现
Dec 13 Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 Javascript
gulp构建小程序的方法步骤
May 31 Javascript
vue实现顶部菜单栏
Nov 08 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缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
PHP url 加密解密函数代码
2011/08/26 PHP
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
js运动应用实例解析
2015/12/28 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
JS高级运动实例分析
2016/12/20 Javascript
Bootstrap3下拉菜单的实现
2017/02/22 Javascript
Vue响应式原理详解
2017/04/18 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
[20:30]职业巡回赛回顾
2018/08/09 DOTA
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
python字符串格式化方式解析
2019/10/19 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
运动会广播稿100字
2014/01/11 职场文书
给物业的表扬信
2014/01/21 职场文书
离婚协议书怎么写
2015/01/26 职场文书
大四学生个人总结
2015/02/15 职场文书
教师师德表现自我评价
2015/03/05 职场文书
2015年女职工工作总结
2015/05/15 职场文书
党支部综合考察意见
2015/06/01 职场文书
音乐研修感悟
2015/11/18 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
js实现自动锁屏功能
2021/06/02 Javascript
python 中yaml文件用法大全
2021/07/04 Python
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL