跨浏览器CSS加载完成检测的JavaScript方法
131 浏览量
更新于2024-08-30
收藏 57KB PDF 举报
本文档主要探讨如何在JavaScript中实现判断CSS文件加载完毕的方法,尤其是在不同浏览器环境下,由于兼容性问题,处理方式有所不同。首先,针对IE6到IE9以及Opera浏览器,利用`onload`事件可以较为直接地检测CSS文件加载完成。例如,使用`styleOnload`函数:
```javascript
function styleOnload(node, callback) {
if (node.attachEvent) { // IE6-9
node.attachEvent('onload', function() {
callback(); // CSS加载完成调用回调函数
// 注意:onload在IE6-9中会在文件404时触发,但Opera会无响应,因此需要处理这种情况。
});
}
else {
// 非IE浏览器处理
}
}
```
然而,在其他现代浏览器如Firefox和WebKit(包括Safari)中,因为API的不同,需要采取更复杂的方法。Firefox可以通过`sheet.cssRules`属性是否存在来判断,但需要设置定时器进行轮询:
```javascript
function poll(node, callback) {
if (callback.isCalled) return; // 防止多次调用
let isLoaded = false;
if (/webkit/i.test(navigator.userAgent)) { // WebKit
if ('sheet' in node) {
isLoaded = true;
}
}
else if ('sheet' in node) { // Firefox
try {
if ('cssRules' in node.sheet) {
isLoaded = true;
}
} catch (ex) {
// 如果抛出NS_ERROR_DOM_SECURITY_ERR错误,则认为CSS已加载
if (ex.code === 1000) {
isLoaded = true;
}
}
}
if (isLoaded) {
setTimeout(function() {
callback(); // CSS加载完成时调用回调
}, 0); // 给渲染一些时间
}
}
```
JavaScript判断CSS文件加载完毕的方法取决于所使用的浏览器及其支持的DOM API。开发者需要根据目标浏览器的特性,选择合适的策略来确保功能的兼容性和效率。
2020-11-30 上传
2021-01-21 上传
2020-10-25 上传
2020-10-14 上传
2020-11-24 上传
2020-10-27 上传
2020-10-22 上传
2019-07-03 上传
weixin_38645335
- 粉丝: 3
- 资源: 920
最新资源
- 新代数控API接口实现CNC数据采集技术解析
- Java版Window任务管理器的设计与实现
- 响应式网页模板及前端源码合集:HTML、CSS、JS与H5
- 可爱贪吃蛇动画特效的Canvas实现教程
- 微信小程序婚礼邀请函教程
- SOCR UCLA WebGis修改:整合世界银行数据
- BUPT计网课程设计:实现具有中继转发功能的DNS服务器
- C# Winform记事本工具开发教程与功能介绍
- 移动端自适应H5网页模板与前端源码包
- Logadm日志管理工具:创建与删除日志条目的详细指南
- 双日记微信小程序开源项目-百度地图集成
- ThreeJS天空盒素材集锦 35+ 优质效果
- 百度地图Java源码深度解析:GoogleDapper中文翻译与应用
- Linux系统调查工具:BashScripts脚本集合
- Kubernetes v1.20 完整二进制安装指南与脚本
- 百度地图开发java源码-KSYMediaPlayerKit_Android库更新与使用说明