在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 相关文章推荐
使一个函数作为另外一个函数的参数来运行的javascript代码
Aug 13 Javascript
Prototype Template对象 学习
Jul 19 Javascript
JavaScript 对象模型 执行模型
Dec 06 Javascript
无缝滚动js代码通俗易懂(自写)
Jun 19 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 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面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
深入剖析浏览器退出之后php还会继续执行么
2016/05/17 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
浅析PHP echo 和 print 语句
2020/06/30 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
js精度溢出解决方案
2012/12/02 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
简单介绍Python中的round()方法
2015/05/15 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
详解Python中的Lock和Rlock
2021/01/26 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
Currentbody西班牙:美容仪专家
2019/09/28 全球购物
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电
Python实现简单得递归下降Parser
2022/05/02 Python