html 载入前判断,js如何判断css是否加载完毕？

在多数情况下我们不需要判断css文件是否加载成功了，但有些时间这个功能还是需要的，下面本篇文章就来给大家介绍一下兼容各种浏览器的判断CSS文件加载完毕实现方法，希望对大家有所帮助。

要判断这个 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);

// 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!

}

// polling for Firefox, Chrome, Safari

else {

setTimeout(function() {

poll(node, callback);

}, 0); // for cache

}

}

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);

}

}

// 我的动态创建LINK函数

function createLink(cssURL,lnkId,charset,media){

var head = document.getElementsByTagName('head')[0],

linkTag = null;

if(!cssURL){

return false;

}

linkTag = document.createElement('link');

linkTag.setAttribute('id',(lnkId || 'dynamic-style'));

linkTag.setAttribute('rel','stylesheet');

linkTag.setAttribute('charset',(charset || 'utf-8'));

linkTag.setAttribute('media',(media||'all'));

linkTag.setAttribute('type','text/css');

linkTag.href = cssURL;

head.appendChild(linkTag);

}

function loadcss(){

var styleNode = createLink('/wp-content/themes/BlueNight/style.css');

styleOnload(styleNode,function(){

alert("loaded");

});

}

Diego Perini的另一个解决方案：/*

* Copyright (C) 2010 Diego Perini

* All rights reserved.

*

* cssready.js - CSS loaded/ready state notification

*

* Author: Diego Perini

* Version: 0.1

* Created: 20100616

* Release: 20101104

*

* License:

* //www.jb51.net * Download:

* http://javascript.nwbox.com/cssready/cssready.js

*/

function cssReady(fn, link) {

var d = document,

t = d.createStyleSheet,

r = t ? 'rules' : 'cssRules',

s = t ? 'styleSheet' : 'sheet',

l = d.getElementsByTagName('link');

// passed link or last link node

link || (link = l[l.length - 1]);

function check() {

try {

return link && link[s] && link[s][r] && link[s][r][0];

} catch(e) {

return false;

}

}

(function poll() {

check() && setTimeout(fn, 0) || setTimeout(poll, 100);

})();

}

其实，如果你读过jQuery的domready事件的判断的代码，原理也类似。也是通过setTimeout轮询的方式来判断DOM节点是否加载完毕。

更多前端开发知识，请查阅 HTML中文网 ！！