判断在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 相关文章推荐
Javascript load Page,load css,load js实现代码
Mar 31 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
Jan 17 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 Javascript
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
AngularJS表格详解及示例代码
Aug 17 Javascript
jQuery Tree Multiselect使用详解
May 02 jQuery
基于AngularJS的拖拽文件上传的实例代码
Jul 15 Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 Javascript
VUE2.0中Jsonp的使用方法
May 22 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 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
防止用户利用PHP代码DOS造成用光网络带宽
2011/03/01 PHP
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
深入php内核之php in array
2015/11/10 PHP
PHP 生成微信红包代码简单
2016/03/25 PHP
php多线程并发实现方法
2016/09/30 PHP
JavaScript 参考教程
2006/12/29 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
jquery动画1.加载指示器
2012/08/24 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
python通过shutil实现快速文件复制的方法
2015/03/14 Python
python 系统调用的实例详解
2017/07/11 Python
Python2随机数列生成器简单实例
2017/09/04 Python
python如何爬取网页中的文字
2020/07/28 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
软件设计的目标是什么
2016/12/04 面试题
航空大学应届生求职信
2013/11/10 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python