在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中为String对象添加trim,ltrim,rtrim方法
Sep 22 Javascript
工作需要写的一个js拖拽组件
Jul 28 Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
javascript函数重载解决方案分享
Feb 19 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
js判断复选框是否选中及选中个数的实现代码
May 30 Javascript
JavaScript中Form表单技术汇总(推荐)
Jun 26 Javascript
Vue.js每天必学之数据双向绑定
Sep 05 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 Javascript
ES6入门教程之Array.from()方法
Mar 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
一个简单的PHP入门源程序
2006/10/09 PHP
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
纯js实现隔行变色效果
2017/11/29 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
python图像和办公文档处理总结
2019/05/28 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
幼儿园开学家长寄语
2014/01/19 职场文书
请假条标准格式规范
2014/04/10 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
公司股东出资证明书
2014/11/01 职场文书
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android