判断在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表单验证代码(包括例子)
Nov 11 Javascript
ajax的hide隐藏问题解决方法
Dec 11 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
javascript包装对象实例分析
Mar 27 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 Javascript
React进阶学习之组件的解耦之道
Aug 07 Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
解析Json字符串的三种方法日常常用
May 02 Javascript
webpack4 SCSS提取和懒加载的示例
Sep 03 Javascript
JavaScript实现随机五位数验证码
Sep 27 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
使用dump函数,给php加断点测试
2013/06/25 PHP
php实现监控varnish缓存服务器的状态
2014/12/30 PHP
php使用curl获取https请求的方法
2015/02/11 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
python实现批量图片格式转换
2020/06/16 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
综合测评自我鉴定
2013/10/08 职场文书
办公室经理岗位职责
2014/01/01 职场文书
电子商务自荐书范文
2014/01/04 职场文书
教师党员思想汇报
2014/01/06 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
高中生的自我鉴定范文
2014/01/24 职场文书
工人先锋号申报材料
2014/12/29 职场文书
总经理岗位职责范本
2015/04/01 职场文书
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis