在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学习笔记(七)利用javascript来创建和存储cookie
Apr 08 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
教你如何使用node.js制作代理服务器
Nov 26 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
May 29 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 Javascript
详解js实时获取并显示当前时间的方法
May 10 Javascript
Node.js 的 GC 机制详解
Jun 03 Javascript
JavaScript实现商品评价五星好评
Nov 30 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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
详谈php ip2long 出现负数的原因及解决方法
2017/04/05 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
用正则xmlHttp实现的偷(转)
2007/01/22 Javascript
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
python服务器端收发请求的实现代码
2014/09/29 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
Python3计算三角形的面积代码
2017/12/18 Python
python如何将图片转换为字符图片
2020/08/19 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
公司总经理任命书
2014/06/05 职场文书
作文评语怎么写
2014/12/25 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
学校会议通知范文
2015/04/15 职场文书
边城读书笔记
2015/06/29 职场文书
宣传部部长竞选稿
2015/11/21 职场文书