如何判断css是否加载完成
2015-04-22 14:53
309 查看
要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理:
View Code
在看到seajs的代码的时候,我立刻想起了我看到Diego Perini的另一个解决方案
其实,如果你读过jQuery的domready事件的判断的代码,原理也类似。也是通过setTimeout轮询的方式来判断DOM节点是否加载完毕。
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"); }); }
View Code
在看到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.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节点是否加载完毕。
相关文章推荐
- 如何判断页面是否加载完成
- form下载文件,指向iframe ,如何判断iframe加载完成 form.submit之后的事件问题 监听form表单下载文件是否完成
- 如何判断控件是否已加载完成
- 如何判断图片是否加载完成
- javascript 图像预载入和如何判断图片是否加载完成
- 如何判断控件是否已加载完成
- 判断脚本,图片,CSS,iframe等是否加载完成
- 【经验总结】跪求指导:如何判断图片是否加载完成
- 判断img是否加载完成
- 用js判断页面是否加载完成
- 判断图片是否加载完成(jquery插件fe)
- js判断图片是否加载完成
- 判断 iframe 是否加载完成的完美方法
- 判断webview是否彻底加载完成
- ★★ 如何检测本页中的iframe是否“加载”完成
- 关于JS判断图片是否加载完成且获取图片宽度的方法
- 如何判断网页加载完成
- 用js判断页面是否加载完成实现代码
- 判断控件是否已加载完成的代码
- 如何判断页面加载完成