在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扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
javascript在myeclipse中报错的解决方法
Oct 29 Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
使用vue-router为每个路由配置各自的title
Jul 30 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
Vue 进阶之路(三)
Apr 18 Javascript
Vue使用Three.js加载glTF模型的方法详解
Jun 14 Javascript
react-native 实现购物车滑动删除效果的示例代码
Jan 15 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
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
PHP实现获取FLV文件的时间
2015/02/10 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
2017/12/26 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
JQuery常见节点操作实例分析
2019/05/15 jQuery
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
Python基础知识_浅谈用户交互
2017/05/31 Python
python numpy格式化打印的实例
2018/05/14 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
python迭代dict的key和value的方法
2018/07/06 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
PyTorch的自适应池化Adaptive Pooling实例
2020/01/03 Python
html5 视频播放解决方案
2016/11/06 HTML / CSS
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
维也纳通行证:Vienna PASS
2019/07/18 全球购物
.NET面试问题集
2015/12/08 面试题
生物制药专业自我鉴定
2014/02/19 职场文书
诚信贷款承诺书
2014/05/30 职场文书
超市店庆活动方案
2014/08/31 职场文书
简历自我评价优缺点
2015/03/11 职场文书
党员转正申请报告
2015/05/15 职场文书
呐喊读书笔记
2015/06/30 职场文书
学者《孟子》名人名言
2019/08/09 职场文书
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP
拙作再改《我的收音机情缘》
2022/04/05 无线电