如何判断css加载完成?

如何判断css加载完成?

要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大。

  • IE下可以直接使用onload事件来监听css加载。

  • Firefox和webkit内核的浏览器,需要使用setTimeout来轮询判断

1、IE下判断的方法:

// 代码节选至seajs
function styleOnload(node, callback) {
    // for IE6-9 and Opera
    if (node.attachEvent) {
      node.attachEvent('onload', callback);
      // NOTICE:
      // 1. "onload" will be fired in IE6-9 when the file is 404, but in
      // this situation, Opera does nothing, so fallback to timeout.
      // 2. "onerror" doesn't fire in any browsers!
    }
}

2、Firefox和webkit内核浏览器可以通过node.sheet.cssRules属性是否存在来判断是否加载完毕。而且需要使用setTimeout间隔事件轮询(相关课程推荐:JS视频教程

// 代码节选至seajs 
function poll(node, callback) {
    if (callback.isCalled) {
      return;
    }
    var isLoaded = false;
    if (/webkit/i.test(navigator.userAgent)) {//webkit
      if (node['sheet']) {
        isLoaded = true;
      }
    }
    // for Firefox
    else if (node['sheet']) {
      try {
        if (node['sheet'].cssRules) {
          isLoaded = true;
        }
      } catch (ex) {
        // NS_ERROR_DOM_SECURITY_ERR
        if (ex.code === 1000) {
          isLoaded = true;
        }
      }
    }
    if (isLoaded) {
      // give time to render.
      setTimeout(function() {
        callback();
      }, 1);
    }
    else {
      setTimeout(function() {
        poll(node, callback);
      }, 1);
    }
  } 

setTimeout(function() {
     poll(node, callback);
}, 0);

具体的实现方法,建议看看seajs的源码文件。

Image placeholder
前端答疑
未设置
  82人点赞

没有讨论,发表一下自己的看法吧

推荐文章
jquery如何判断图片是否加载完成?

对于图片的处理,例如幻灯片播放、缩放等,都是依赖于在所有图片完成之后再进行操作。今天来看下如何判断所有的图片加载完成,而在加载完成之前可以使用loading的gif图表示正在加载中。一、普通方法监听i

jquery判断页面是否加载完成?

jquery判断页面是否加载完成?1、使用$(document).ready()$(document).ready(function(){ alert('dom加载完成'); });2、简写方式(推荐

jquery判断css文件是否存在?

jquery判断css文件是否存在?主要使用了ajax,通过请求css资源文件,根据http状态码来进行判断。状态码为200则存在,为404则不存在。检测 $("#btn").click(func

jquery判断class是否存在?

jquery判断class是否存在?两种方法如下:●hasClass('classname')●is('.classname')例子:1、使用is('.classname')的方法$('div').i

jquery判断checkbox是否被选中?

jquery判断checkbox是否被选中?一、is()方法进行判断$("input[type='checkbox']").is(':checked')返回true或false二、attr()方法进行

css语法由哪三部分组成?

CSS语法由三部分构成,分别:选择器、属性和值。selector{property:value} 选择器{属性:属性值}选择器(selector)通常是你希望定义的HTML元素或标签,属性(prope

javascript如何判断是不是整数?

方式一、使用取余运算符判断任何整数都会被1整除,即余数是0。利用这个规则来判断是否是整数。functionisInteger(obj){ returnobj%1===0 } isInteger(3);

jquery如何判断元素是否存在?

jquery如何判断元素是否存在?jquery使用$(selector)方法查找dom元素,返回的是一个jquery对象,具有length属性。length即找到的dom元素个数,只需判断length

jquery如何判断元素内容是否为空?

jquery如何判断元素内容是否为空?下面提供了两种方法用于检查指定id的元素的内容是否为空,当然了,不仅仅适用于指定了id的元素,同样适用于其他元素,只需要改变选择器即可。一、使用html()方法获

jquery如何判断是否是对象?

jquery如何判断是否是对象?jquery提供了isPlainObject方法来判断一个变量是否是对象类型,返回值为Boolean类型。例子:varobj={a:1}; vararr=[1,2];

jquery如何判断是否是数组?

jquery如何判断是否是数组?jquery提供了isArray方法来判断一个变量是否是数组类型,返回值为Boolean类型。例子:varobj={a:1}; vararr=[1,2]; varbo

jquery如何判断对象是否获取焦点?

jquery如何判断对象是否获取焦点?jquery判断对象获取焦点可以使用$(selector).is(":focus")。当对象具有焦点时返回为true,否则返回为false。语法:$(select

jquery如何判断对象是否存在?

jquery如何判断对象是否存在?一、jQuery判断对象是否存在1、方法一在jQuery中,varobj=$("#id")无论id这个控件是否存在,都是返回object,所以需要通过length来判

jquery如何判断属性是否存在?

jquery如何判断属性是否存在?jquery判断属性存在可以使用attr()方法、is()方法、filter()方法,以及原生js的hasAttribute()方法。1、使用attr()获取属性,检

jquery如何判断值是否是url地址?

jquery如何判断值是否是url地址?思路:1、创建一个输入框,使用jquery给它注册change事件;2、创建一个函数checkUrl,传入一个url参数;3、函数内编写一条检测url正确性的正

jquery如何判断是否是ie浏览器?

jquery如何判断是否是ie浏览器?在写页面的时候,会遇到浏览器兼容问题,在这个浏览器中可以使用,但在其他浏览器中却不能很好的显示。以下就是判断浏览器的方法,从而更好的区分代码,使得页面正常浏览。f

jquery如何判断是否为数组?

jquery如何判断是否为数组?$.isArray()函数用于判断指定参数是否是一个数组。只需要将需要判断的变量传入方法中即可。语法$.isArray(object)/jQuery.isArray(o

如何判断是否为jquery对象?

要判断一个javascript的对象是什么类型,可以使用typeof,但是typeof只能判断出js的基础对象(string,boolean,number,object)而,判断一个对象是否为jque

jquery如何判断元素是否在数组中?

要判断数组中是否包含某个元素,从原理来来说,就是遍历整个数组,然后判断是否相等。可以使用Jquery提供的方法:$.inArray("元素(字符串)",数组名称)进行判断,当存在该元素(字符串)时,返

jquery如何判断字符串是否包含指定字符?

方法一:使用indexOf()和lastIndexOf()方法案例:varCts="bblText"; if(Cts.indexOf("Text")>=0){ alert('Cts中包含Text字符串

jquery如何判断复选框是否被选中?

方法一:get(0).checkedif($("#checkbox-id").get(0).checked){ //dosomething }方法二:is(':checked')if($('#chec

jquery如何判断某个属性是否存在?

在JQuery中,我们会判断元素是否存在某个属性。比如是否包含class="new"的样式呢?在JQuery中判断是非常简单的。因为有hasClass这个方法,使用$("input[name=new]

jquer如何判断是否有滚动条?

利用jQueryscrollTop()来控制滚动条滚动,再判断滚动条是否有偏移。如果有,则存在滚动条,相反没有滚动就不存在。 $(function(){ $("body").scrollTop(10)

jquery如何判断的是否为数字?

方法一:使用isNaN()函数varval=$("#test").val(); varival=parseInt(val);//如果变量val是字符类型的数则转换为int类型如果不是则ival为NaN

jquery如何判断是否为对象?

在jquery中,可以使用isPlainObject()方法来判断是否为对象。示例:varobj={a:1} varbool=$.isPlainObject(obj)判断是否为对象返回Boolean