Js判断CSS文件加载完成的具体实现

发布时间：2023-09-22 15:28:10 所属栏目：教程来源：

导读：要判断这个 CSS 文件是否加载完毕，各个浏览器的做法差异比较大，这次要说IE浏览器做的不错，我们可以直接通过onload方法来处理CSS加载完成以后的处理：

代码如下:

// 代码节选至seajs

function styleOn

要判断这个 CSS 文件是否加载完毕，各个浏览器的做法差异比较大，这次要说IE浏览器做的不错，我们可以直接通过onload方法来处理CSS加载完成以后的处理：

代码如下:

// 代码节选至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!

    }

}

很遗憾，这次在其他的浏览器中，想判断CSS是否加载完成就不是那么方便了，FF,webkit可以通过node.sheet.cssRules属性是否存在来判断是否加载完毕。而且需要使用setTimeout间隔事件轮询：

代码如下:

// 代码节选至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给出的完整的处理是这样的：

代码如下:

function styleOnload(node, callback) {

    // for IE6-9 and Opera

    if (node.attachEvent) {

      node.attachEvent('onload', callback);

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!