判断在css加载完毕后执行后续代码示例


Posted in Javascript onSeptember 03, 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技术技巧大全(五)
Jan 22 Javascript
js获取单选框或复选框值及操作
Dec 18 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
vue v-model表单控件绑定详解
May 17 Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 #Javascript
jQuery自带的一些常用方法总结
Sep 03 #Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 #Javascript
JavaScript实现找出数组中最长的连续数字序列
Sep 03 #Javascript
js实现的类似于asp数据字典的数据类型代码实例
Sep 03 #Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 #Javascript
Egret引擎开发指南之视觉编程
Sep 03 #Javascript
You might like
mysql 搜索之简单应用
2007/04/27 PHP
php流量统计功能的实现代码
2012/09/29 PHP
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
JavaScript枚举选择jquery插件代码实例
2020/11/17 jQuery
Python综合应用名片管理系统案例详解
2020/01/03 Python
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
英国行业制服供应商:Alexandra
2019/09/14 全球购物
Ruby如何创建一个线程
2013/03/10 面试题
毕业生护理专业个人求职信范文
2014/01/04 职场文书
关于教师节的广播稿
2014/09/10 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
整改报告怎么写
2014/11/06 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
英雄儿女观后感
2015/06/09 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS