判断在css加载完毕后执行后续代码示例
更新时间：2014年09月03日 11:18:45 投稿：whsnow
这篇文章主要介绍了在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;
}
相关文章
题意：在界面上有一张图片，下面有四个单选按钮，点击每一个按钮图片变换成不同的图片2013-04-04
mysql 是非持继连接函数而 mysqli 是永远连接函数。也就是说 mysql 每次链接都会打开一个连接的进程而 mysqli 多次运行 mysqli 将使用同一连接进程,从而减少了服务器的开销。2010-05-05
网页实时倒计时，精确到秒级，和天数倒计时原理一样,需要的朋友可以参考下2014-02-02
这篇文章主要为大家详细介绍了js实现人民币大写金额形式转换的相关资料,需要的朋友可以参考下2016-04-04
这篇文章主要介绍了javascript框架设计之类工厂的相关资料,非常浅显易懂，有需要的小伙伴可以查看下。2015-06-06
我们在做小程序支付相关的开发时,总会遇到这些难题,下面这篇文章主要给大家介绍了关于微信小程序调用支付接口的完整流程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-02-02
Javascript实现一个简单的输入关键字添加标签效果实例
这篇文章主要给大家介绍了利用Javascript实现一个简单的输入关键字添加标签效果的相关资料，类似动态添加标签的效果，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友可以参考借鉴，下面来一起看看吧。2017-06-06
这篇文章主要介绍了使用JavaScript通过前端发送电子邮件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
这篇文章主要给大家介绍了利用JavaScript实现事件的中断传播和行为阻止的方法示例，文中给出了详细的介绍和示例代码，相信对大家的理解和学习具有一定的参考借鉴价值，需要的朋友们下面来一起看看吧。2017-01-01
项目需求是这样的：在一个页面放2个悬浮框，悬浮框随页面的上下滚动有上下波动的效果，最终固定在同一位置，下面通过本文给大家分享基于JavaScript实现div层跟随滚动条滑动的相关资料，对js div跟随滚动条滑动相关知识感兴趣的朋友一起学习吧2016-01-01
最新评论