最近在写项目的framework,写个JQueryMessageBox的类,以使用jquery ui中的dialog()来显示消息框,为了使方法方便调用,便加入了自动判断页面是否加入了ui.js和ui.css,代码如下:

  1. //如果没有包含ui.js,则引用
  2. if ($('script[src$=""jquery-ui-1.8.11.custom.min.js""]').length == 0) {{
  3. $(""<script src='/js/jquery-ui-1.8.11.custom.min.js' type='text/javascript' />"").appendTo('head');
  4. }}
  5. //如果没有加载css,则加载
  6. if ($('link[ref$=""jquery-ui-1.8.14.custom.css""]').length == 0) {{
  7. $('<link href=""/css/jquery-ui-1.8.14.custom.css"" rel=""stylesheet"" type=""text/css"" />').appendTo('head');
  8. //dialog() script
  9. }}

但CSS代码不会立即加载下来,于是在显示dialog的时候则不会有样式(在IE9下可以,因为在IE9下CSS即使后下载下来,也会重新绘制页面元素,而IE8则不会).解决此问题的方法,可以使用ajax,当css加载完毕后,再显示dialog,这样就可以带着样式显示出来了,代码如下:

  1. if ($('link[ref$=""jquery-ui-1.8.14.custom.css""]').length == 0) {
  2. $.ajax({
  3. url: '/css/jquery-ui-1.8.14.custom.css',
  4. success: function(data) {
  5. //创建一个style元素,并追加到head中
  6. //替换其中images的路径
  7. $('<style type="text/css">' + data.replace(/url\(images/g, 'url(/css/images') + '</style>').appendTo('head');
  8. //dialog() script;
  9. }
  10. });
  11. }
  12. else {
  13. //dialog() script;
  14. }

在css加载完毕后执行后续代码的更多相关文章

  1. 图片加载完毕后执行JS代码

    $("#img").load(function(){...}); 这是jquery提供的一个方法,但是在IE中会有BUG,IE8不支持,IE9以上刷新后也不会执行,只有强制刷新才执 ...

  2. Android下设置ListView数据加载完成后执行layoutanimation

    今天使用android的volley框架写了一个简单的网络天气获取的demo. 承载数据的空间是ListView 因为是网络加载,必然先要设置ListView的默认数据,我设置的就是那个Loading ...

  3. window.onload在文档加载完成后执行

    验证a .b两点疑惑: a.<script src="./main.js"></script>中的window.onload是在html全部加载完了才执行, ...

  4. PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题

    PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题,PageSlider中加入CSS3动画的话,默认只有首屏是从无到有执行动画,其他屏都是显示下页面再执行动画 这就造成其他屏的动 ...

  5. js页面加载完后执行(document.onreadystatechange 和 document.readyState)

    js页面加载完后执行javascript(document.onreadystatechange 和 document.readyState) document.onreadystatechange ...

  6. spring boot容器加载完后执行特定操作

    有时候我们需要在spring boot容器启动并加载完后,开一些线程或者一些程序来干某些事情.这时候我们需要配置ContextRefreshedEvent事件来实现我们要做的事情 1.Applicat ...

  7. 页面加载完毕后调用js方法进行布局操控 已实验

    页面加载完毕后调用js方法进行布局操控 已实验 $(function(){ var check1 = $("[id$=SMS]").is(':checked'); var bl=$ ...

  8. php页面加载完毕后再显示购买按钮

    php页面加载完毕后再显示购买按钮 $document.ready(function(){ $("#buybotton").show()})

  9. js中页面加载完成后执行的几种方法及执行顺序

    在js和jquery使用中,经常使用到页面加载完成后执行某一方法.通过整理,大概是五种方式(其中有的只是书写方式不一样). 1:使用jQuery的$(function){}; 2:使用jquery的$ ...

随机推荐

  1. docker 解决network has active endpoints

    解决方式 使用 docker network disconnect -f {network} {endpoint-name},其中的 {endpoint-name} 可以使用命令 docker net ...

  2. 【C#】Lamada表达式演变过程

    static void Main() { //第一步 委托实例调用 Func<string, int> test = new Func<string, int>(getLeng ...

  3. 在C#中使用CURL

    private string args = "";          /// <summary>         /// 参数         /// </sum ...

  4. learn_requests

    # -*- coding: utf-8 -*- import requests URL_IP = 'http://localhost:8000/ip' URL_GET = 'http://localh ...

  5. 分布式锁的理解,java自带的锁为什么会失效

    前段时间在发送短信的代码块上通过网上找的工具类基于Redis实现了分布式锁的功能 对应的链接https://www.cnblogs.com/c-h-y/p/9391602.html 周末想细细看一下. ...

  6. Codeforces Round #436 (Div. 2) E. Fire(dp 记录路径)

    E. Fire time limit per test 2 seconds memory limit per test 256 megabytes input standard input outpu ...

  7. 【BZOJ 3622】3622: 已经没有什么好害怕的了(DP+容斥原理)

    3622: 已经没有什么好害怕的了 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 683  Solved: 328 Description Input ...

  8. 课堂实验-Bag

    这次的课堂实验比较简单,但尴尬的是竟然没有做出来,自己的代码能力下降了不少.IDEA的Junit测试出了问题.所以这次实验是和结对伙伴结对编程写的. public class Bag<T> ...

  9. bzoj 1098

    对于关系,看其是否是“等价关系”,即满足:自反,传递,对称. 如果是可以用并查集来连接等价类. 这道题是求原图补集的联通快个数,考虑原图度最少的点(由鸽巢原理,最多为2*e/n个). 先将未与其连边的 ...

  10. Android中数据存储(四)——ContentProvider存储数据

    目录(?)[+]   当一个应用程序在Android中安装后,我们在使用应用的过程中会产生很多的数据,应用都有自己的数据,那么我们应该如何存储数据呢? 数据存储方式 Android 的数据存储有5种方 ...