/*
* Copyright (C) 2010 Diego Perini
* All rights reserved.
*
* cssready.js - CSS loaded/ready state notification
*
* Author: Diego Perini <diego.perini at gmail com>
* Version: 0.1
* Created: 20100616
* Release: 20101104
*
* License:
* https://www.jb51.net * Download:
*
*/
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节点是否加载完毕。
还有，Fackbook则是通过在动态创建的CSS样式中包含一个固定的样式，例如#loadcssdom，loadcssdom就是一个高度为1px样式。然后动态创建一个DOM对象，添加这个loadcssdom样式。然后也是setTimeout轮询loadcssdo是否已经有1px的高度了。这个处理方式的解决方案，大家可以下《CSSP: Loading CSS with Javascript – and getting an onload callback.》
而《JavaScript Patterns》的作者Stoyan则在他的博客里，比较详细的说明了《When is a stylesheet really loaded?》。
看完了这些，你可能会感叹：汗，判断CSS是否加载完毕，目前还真不是那么容易！其实我这里算是一个抛砖引玉，因为开发中，除了动态加载CSS，我们还要动态加载JavaScript，动态加载HTML的操作，有空我也会写关于动态加载JavaScript的相关内容，不过在那之前，我建议你看看这些：
《ensure – Ensure JavaScripts/HTML/CSS are loaded on-demand when needed》，这个库是专门处理动态加载HTML,CSS,JavaScript的。就像作者介绍的那样：
ensure is a tiny JavaScript library that provides a handy function ensure which allows you to load JavaScript, HTML, CSS on-demand, and then execute your code. ensure ensures that the relevant JavaScript and HTML snippets are already in the browser DOM before executing your code that uses them.
《Tell CSS that JavaScript is available ASAP》
看完这个后，你可能就不会纠结：When you're styling parts of a web page that will look and work differently depending on whether JavaScript is available or not。
好了，这次就说这么多了，希望对对大家的开发和学习有帮助！
您可能感兴趣的文章: