判断在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 onpropertychange输入框 事件获取属性
Mar 26 Javascript
jQuery 表单验证扩展代码(二)
Oct 20 Javascript
Jquery自定义button按钮的几种方法
Jun 11 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 Javascript
分析javascript原型及原型链
Mar 18 Javascript
Angular网络请求的封装方法
May 22 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
微信小程序解析富文本过程详解
Jul 13 Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 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 socket的讲解与实例分析
2013/06/13 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
永不消失的title提示代码
2007/02/15 Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
用原生js做单页应用
2017/01/17 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
[17:45]DOTA2 HEROES教学视频教你分分钟做大人-军团指挥官
2014/06/11 DOTA
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
校园报刊亭创业计划书
2014/01/02 职场文书
运动会通讯稿300字
2014/02/02 职场文书
保密协议书范本
2014/04/22 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
党员廉洁自律承诺书
2014/05/26 职场文书
劳动竞赛口号
2014/06/16 职场文书
中专毕业生的自荐书
2014/07/01 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
委托书的样本
2015/01/28 职场文书
5.12护士节活动总结
2015/02/10 职场文书
2016党校培训心得体会
2016/01/07 职场文书
一些让Python代码简洁的实用技巧总结
2021/08/23 Python