在css加载完毕后自动判断页面是否加入css或js文件

 更新时间:2014年09月10日 17:17:55   投稿:whsnow  
使用jquery ui中的dialog()来显示消息框,为了使方法方便调用,便加入了自动判断页面是否加入了ui.js和ui.css,具体实现代码如下

最近在写项目的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; 
}

相关文章

  • 用JQuery实现全选与取消的两种简单方法

    用JQuery实现全选与取消的两种简单方法

    本篇文章主要是对JQuery实现全选与取消的两种简单方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • jQuery实现的简单在线计算器功能

    jQuery实现的简单在线计算器功能

    这篇文章主要介绍了jQuery实现的简单在线计算器功能,结合完整实例形式分析了jQuery实现简单四则运算的相关操作技巧,需要的朋友可以参考下
    2017-05-05
  • 简单的jQuery入门指引

    简单的jQuery入门指引

    这篇文章主要介绍了简单的jQuery入门指引,jQuery是当今最为流行的JavaScript库,需要的朋友可以参考下
    2015-07-07
  • jQuery使用animate创建动画用法实例

    jQuery使用animate创建动画用法实例

    这篇文章主要介绍了jQuery使用animate创建动画用法,可实现点击链接文字隐藏及显示文字的功能,实例分析了jquery中toggle与animate方法的使用技巧,需要的朋友可以参考下
    2015-08-08
  • 详解JavaScript中jQuery和Ajax以及JSONP的联合使用

    详解JavaScript中jQuery和Ajax以及JSONP的联合使用

    这篇文章主要介绍了详解JavaScript中jQuery和Ajax以及JSONP的联合使用,jQuery库和Ajax异步结构以及JSON数据传输也是JS日常编程中最常用到的东西,需要的朋友可以参考下
    2015-08-08
  • DWZ刷新dialog解决方法

    DWZ刷新dialog解决方法

    点击某个按钮,删除某条记录后,提示删除成功,然后刷新dialog。
    2013-03-03
  • jquery实现预览提交的表单代码分享

    jquery实现预览提交的表单代码分享

    这篇文章主要介绍了jquery实现预览提交的表单代码,需要的朋友可以参考下
    2014-05-05
  • jQuery中val()方法用法实例

    jQuery中val()方法用法实例

    这篇文章主要介绍了jQuery中val()方法用法,以实例形式分析了val()方法的两种常见用法,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • jQuery列表拖动排列具体实现

    jQuery列表拖动排列具体实现

    列表拖动排列的实现方法有很多,下文为大家介绍下使用jQuery是如何实现的,感兴趣的朋友不要错过
    2013-11-11
  • jquery获得当前html页面源码的方法

    jquery获得当前html页面源码的方法

    这篇文章主要介绍了jquery获得当前html页面源码的方法,涉及jquery针对页面元素的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07

最新评论