判断在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 方法大全方便学习参考
Feb 25 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
js实现精确到秒的倒计时效果
May 29 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
js变量提升深入理解
Sep 16 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 Javascript
vue实现2048小游戏功能思路详解
May 09 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
Sep 16 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
Jul 20 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
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
php下清空字符串中的HTML标签的代码
2010/09/06 PHP
php UBB 解析实现代码
2011/11/27 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
javascript中this指向详解
2016/04/23 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
vue2.0 根据状态值进行样式的改变展示方法
2018/03/13 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
python @property的用法及含义全面解析
2018/02/01 Python
Python爬豆瓣电影实例
2018/02/23 Python
Python基本socket通信控制操作示例
2019/01/30 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
教师的实习鉴定
2013/12/15 职场文书
大学生蛋糕店创业计划书
2014/01/13 职场文书
助人为乐表扬信范文
2014/01/14 职场文书
一份恶作剧的检讨书
2014/09/13 职场文书
小马王观后感
2015/06/11 职场文书
教育教学读书笔记
2015/07/02 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android