Js判斷CSS文件加載完畢的具體實現(xiàn)
要判斷這個 CSS 文件是否加載完畢，各個瀏覽器的做法差異比較大，這次要說IE瀏覽器做的不錯，我們可以直接通過onload方法來處理CSS加載完成以后的處理：
// 代碼節(jié)選至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是否加載完成就不是那么方便了，F(xiàn)F,webkit可以通過node.sheet.cssRules屬性是否存在來判斷是否加載完畢。而且需要使用setTimeout間隔事件輪詢：
// 代碼節(jié)選至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);
}
}
// 我的動態(tài)創(chuàng)建LINK函數(shù)
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");
});
}
在看到seajs的代碼的時候，我立刻想起了我看到Diego Perini的另一個解決方案：
/*
* 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:
* http://www.fzitv.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節(jié)點是否加載完畢。
還有，F(xiàn)ackbook則是通過在動態(tài)創(chuàng)建的CSS樣式中包含一個固定的樣式，例如#loadcssdom，loadcssdom就是一個高度為1px樣式。然后動態(tài)創(chuàng)建一個DOM對象，添加這個loadcssdom樣式。然后也是setTimeout輪詢loadcssdo是否已經(jīng)有1px的高度了。這個處理方式的解決方案，大家可以下《CSSP: Loading CSS with Javascript – and getting an onload callback.》
而《JavaScript Patterns》的作者Stoyan則在他的博客里，比較詳細的說明了《When is a stylesheet really loaded?》。
看完了這些，你可能會感嘆：汗，判斷CSS是否加載完畢，目前還真不是那么容易！其實我這里算是一個拋磚引玉，因為開發(fā)中，除了動態(tài)加載CSS，我們還要動態(tài)加載JavaScript，動態(tài)加載HTML的操作，有空我也會寫關(guān)于動態(tài)加載JavaScript的相關(guān)內(nèi)容，不過在那之前，我建議你看看這些：
《ensure – Ensure JavaScripts/HTML/CSS are loaded on-demand when needed》，這個庫是專門處理動態(tài)加載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 www.fzitv.net 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》
看完這個后，你可能就不會糾結(jié)：When you're styling parts of a web page that will look and work differently depending on whether JavaScript is available or not。
好了，這次就說這么多了，希望對對大家的開發(fā)和學(xué)習(xí)有幫助！
相關(guān)文章
ES6引入了Iterator（迭代器）接口,用于順序訪問可迭代對象,Iterator接口提供統(tǒng)一的訪問接口,并通過for...of循環(huán)供消費,本文給大家介紹ES6 迭代器 Iterator使用總結(jié),感興趣的朋友跟隨小編一起看看吧2025-02-02
這篇文章主要介紹了TypeScript接口，接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。下面我們一起進入文章看看TypeScript接口得具體定義吧,需要的朋友也可以參考一下2021-12-12
本文主要介紹了js常用的DOM方法，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
JavaScript實現(xiàn)圖片上傳并預(yù)覽并提交ajax
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)圖片上傳并預(yù)覽并提交ajax，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了微信小程序vant輸入框問題,本文給大家分享完美解決方案，結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-09-09
本文主要分享了javascript實現(xiàn)tab選項卡切換功能的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
本文是腳本之家小編日常整理的關(guān)于javascript知識點，包括javascript擁有的特點，組成部分，數(shù)據(jù)類型等方面，對javascript知識點相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-12-12
這篇文章主要介紹了JS實現(xiàn)上傳圖片實時預(yù)覽功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-05-05
用js實現(xiàn)的檢測瀏覽器和系統(tǒng)的函數(shù)
檢測各種瀏覽器、系統(tǒng)的JS代碼2009-04-04
函數(shù)式JavaScript編程指南...2007-02-02