在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
mapper--图片热点区域高亮组件官方站点
Dec 22 Javascript
JavaScript 比较时间大小的代码
Apr 24 Javascript
Jquery Autocomplete 结合asp.net使用要点
Oct 29 Javascript
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
不使用jquery实现js打字效果示例分享
Jan 19 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
基于Three.js实现360度全景图片
Dec 30 Javascript
Vue Extends 扩展选项用法完整实例
Sep 17 Javascript
node.js使用stream模块实现自定义流示例
Feb 13 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
Nov 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
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
2013/04/15 Javascript
js为数字添加逗号并格式化数字的代码
2013/08/23 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
Javascript BOM学习小结(六)
2015/11/26 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
webpack之devtool详解
2018/02/10 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
详解Python编程中基本的数学计算使用
2016/02/04 Python
深入理解python对json的操作总结
2017/01/05 Python
详解python 中in 的 用法
2019/12/12 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
基于python实现操作redis及消息队列
2020/08/27 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
W Concept美国:精选全球独立设计师
2017/02/22 全球购物
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
冰淇淋店的创业计划书
2014/02/07 职场文书
工厂总经理岗位职责
2014/02/07 职场文书
个性婚礼策划方案
2014/05/17 职场文书
2014年团工作总结
2014/11/27 职场文书
浅谈redis整数集为什么不能降级
2021/07/25 Redis