当前位置: 首页 > 编程笔记 >

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

蒯宇定
2023-03-14
本文向大家介绍判断在css加载完毕后执行后续代码示例,包括了判断在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; 
}
 类似资料:
  • 本文向大家介绍在css加载完毕后自动判断页面是否加入css或js文件,包括了在css加载完毕后自动判断页面是否加入css或js文件的使用技巧和注意事项,需要的朋友参考一下 最近在写项目的framework,写个JQueryMessageBox的类,以使用jquery ui中的dialog()来显示消息框,为了使方法方便调用,便加入了自动判断页面是否加入了ui.js和ui.css,代码如下: 但CS

  • 本文向大家介绍JavaScript & jQuery完美判断图片是否加载完毕,包括了JavaScript & jQuery完美判断图片是否加载完毕的使用技巧和注意事项,需要的朋友参考一下 众所周知,常见瀑布流当鼠标滚动到浏览器底部的时候,就会发起一个ajax的请求。在服务端生成item列表后,通过 js append到相应的div里边。 看起来很简单的样子,关键问题就出在图片的加载问题上,图片一般

  • 本文向大家介绍JS实现文档加载完成后执行代码,包括了JS实现文档加载完成后执行代码的使用技巧和注意事项,需要的朋友参考一下 在执行某些操作的时候,需要当文档完全加载完成之后再去执行,否则可能出现意向不到的情况,先看一段代码实例: 以上代码的初衷是将div的背景颜色设置为#639,但是并未达到我们预期的效果,这是因为文档加载的时候代码是顺序执行的,当执行js的设置背景颜色代码的时候,还没有加载到指定

  • 本文向大家介绍Ext GridPanel加载完数据后进行操作示例代码,包括了Ext GridPanel加载完数据后进行操作示例代码的使用技巧和注意事项,需要的朋友参考一下 比如load数据之后选定某些行数据。 this相当于当前的GridPanel, idxs相当于你要选中的行号

  • 本文向大家介绍JavaScript判断页面加载完之后再执行预定函数的技巧,包括了JavaScript判断页面加载完之后再执行预定函数的技巧的使用技巧和注意事项,需要的朋友参考一下 JavaScript 脚本语言的执行,是需要触发的。一般的做法就是在网页中,直接编写几个函数,有的在代码被加载的时候就被浏览器处理,或者使用类似下面的代码来触发实现函数的相关功能。 上面代码的意思就是,当鼠标点击 id

  • 本文向大家介绍js怎么判断flash swf文件是否加载完毕,包括了js怎么判断flash swf文件是否加载完毕的使用技巧和注意事项,需要的朋友参考一下 js怎么判断flash是否加载完毕了呢? 我们怎么在flash加载完毕之时,回调一个我们设定的js函数? 这个问题,一直困扰了我很久,直到今天,请教了一个非常牛B的人物之后,突然来了感觉! 呵呵,也许,这个问题在你们看来不是问题,不过对于我来说