在css加载完毕后自动判断页面是否加入css或js文件


Posted in Javascript onSeptember 10, 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 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
jQuery timers计时器简单应用说明
Oct 28 Javascript
jquery链式操作的正确使用方法
Jan 06 Javascript
javascript跨域原因以及解决方案分享
Apr 08 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
underscore之function_动力节点Java学院整理
Jul 11 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
node中的密码安全(加密)
Sep 17 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
基于vue的验证码组件的示例代码
Jan 22 Javascript
详解Vue前端对axios的封装和使用
Apr 01 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 #Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 #Javascript
javascipt:filter过滤介绍及使用
Sep 10 #Javascript
用javascript将数据导入Excel示例代码
Sep 10 #Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 #Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
Sep 09 #Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 #Javascript
You might like
我的论坛源代码(五)
2006/10/09 PHP
php模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
解析php中curl_multi的应用
2013/07/17 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
python计算对角线有理函数插值的方法
2015/05/07 Python
详解python eval函数的妙用
2017/11/16 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
公交公司毕业生求职信
2014/02/15 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
考试诚信承诺书
2014/05/23 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
二婚主持词
2015/06/30 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL
python自动计算图像数据集的RGB均值
2021/06/18 Python