在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动态改变img的src属性图片不显示的解决方法
Oct 20 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
判断日期是否能跨月查询的js代码
Jul 25 Javascript
JS实现适合于后台使用的动画折叠菜单效果
Sep 21 Javascript
JavaScript操作 url 中 search 部分方法函数
Jun 15 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 Javascript
JS实现简易留言板增删功能
Feb 08 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获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
PHP中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
JS location几个方法小姐
2008/07/09 Javascript
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
2012/03/05 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
javascript事件冒泡和事件捕获详解
2015/05/26 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
原生JavaScript实现的简单放大镜效果示例
2018/02/07 Javascript
解决vue-router中的query动态传参问题
2018/03/20 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
使用grappelli为django admin后台添加模板
2014/11/18 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
优秀村官事迹材料
2014/01/10 职场文书
刘胡兰的英雄事迹材料
2014/02/11 职场文书
个人维稳承诺书
2015/05/04 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python
mysql中关键词exists的用法实例详解
2022/06/10 MySQL