在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 相关文章推荐
基于JQuery实现相同内容合并单元格的代码
Jan 12 Javascript
JS写的贪吃蛇游戏(个人练习)
Jul 08 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
一文读懂ES7中的javascript修饰器
May 06 Javascript
Nest.js 授权验证的方法示例
Feb 22 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
php中的MVC模式运用技巧
2007/05/03 PHP
php 正则 过滤html 的超链接
2009/06/02 PHP
php注册登录系统简化版
2020/12/28 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
js定时调用方法成功后并停止调用示例
2014/04/08 Javascript
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
使用python调用zxing库生成二维码图片详解
2017/01/10 Python
深入理解Python3中的http.client模块
2017/03/29 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
python算法题 链表反转详解
2019/07/02 Python
python爬虫 模拟登录人人网过程解析
2019/07/31 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
Python 去除字符串中指定字符串
2020/03/05 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
HTML实现代码雨源码及效果示例
2020/02/25 HTML / CSS
美国在线珠宝商店:SZUL
2017/02/11 全球购物
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
机电一体化毕业生求职信
2013/11/02 职场文书
学校标语大全
2014/06/19 职场文书
青年志愿者活动方案
2014/08/17 职场文书
销售人员工作自我评价
2014/09/21 职场文书
优秀教师个人总结
2015/02/11 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
俄罗斯十大城市人口排名,第三首都仅排第六,第二是北方首都
2022/03/20 杂记