判断js和css是否加载完成
在通过ajax或者src动态获取js、css文件的时候,我们常常需要判断文件是否加载完成,以便进行进一步的操作,但是在检测js、css文件是否已经加载的策略上各浏览器并不统一,有很多坑,现在在这里总结一下
css
判断CSS是否加载完成
1、在head标签内插入 引入css的link标签
2、如果是ie浏览器直接使用onload事件 其它浏览器用setTimeout循环轮询判断下面属性
3、如果是webkit内核判断 link节点上的sheet属性
4、其它浏览器判断节点上的sheet.cssRules属性
上代码
function loadCss(src, fn) {
var node = document.createElement('link');
node.rel = 'stylesheet';
node.href = src; document.head.insertBefore(node, document.head.firstChild); if (node.attachEvent) {//IE
node.attachEvent('onload', function () {
fn(null, node)
});
} else {//other browser
setTimeout(function () {
poll(node, fn);
}, 0);
}
function poll(node, callback) {
var isLoaded = false;
if (/webkit/i.test(navigator.userAgent)) {//webkit
if (node['sheet']) {
isLoaded = true;
}
} else if (node['sheet']) {// for Firefox
try {
if (node['sheet'].cssRules) {
isLoaded = true;
}
} catch (ex) {
// NS_ERROR_DOM_SECURITY_ERR
if (ex.code === 1000) {
isLoaded = true;
}
}
}
if (isLoaded) {
setTimeout(function () {
callback(null, node);
}, 1);
} else {
setTimeout(function () {
poll(node, callback);
}, 10);
}
} node.onLoad = function () {
fn(null, node);
}
}
js文件加载
function loadScript(src, fn) {
var node = document.createElement("script");
node.setAttribute('async', 'async');
var timeID;
var supportLoad = "onload" in node ;
var loadEvent = supportLoad ? "onload" : "onreadystatechange";
node[loadEvent] = function onLoad() {
if (!supportLoad && !timeID && /complete|loaded/.test(node.readyState)) {
timeID = setTimeout(onLoad);
return;
}
if (supportLoad || timeID) {
clearTimeout(timeID);
fn(null, node);
}
};
document.head.insertBefore(node, document.head.firstChild);
node.src = src;
node.onerror = function (e) {
fn(e);
};
}
判断js和css是否加载完成的更多相关文章
- js操纵css更改加载图片大小
- Js判断CSS文件加载完毕的实例教程
要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: 代码如下 复制代码 // 代码节选至se ...
- 如何判断css是否加载完成
要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: // 代码节选至seajs functi ...
- JS/CSS/IMG加载顺序关系之DOMContentLoaded事件
DOMContentLoaded介绍 DOMContentLoaded事件的触发条件是: 将会在“所有的DOM全部加载完毕并且JS加载执行后触发”. 但如果“js是通过动态加载进来的话,是不会影响到D ...
- 图片预加载 js css预加载
图片预加载, 效果非常明显, 特别是有多个图, 方法很简单 , 体验提升了不少 <div class="hidden"> <script type= ...
- JS实现图片预加载无需等待
网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...
- css样式加载顺序及覆盖顺序深入理解
注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position ...
- css文件加载:@import和link的区别
刚看了一个百度试题:请简述CSS加载方式link和@import的区别? 平时一般都用link,也知道css的加载方式,但还真的没有仔细研究过其之间的差别,查了一些资料,大致总结如下: @impot使 ...
- webpack教程(四)——css的加载
首先要安装css的loader npm install css-loader style-loader --save-dev 然后在webpack.config.js中配置如下代码 意思是先用css- ...
随机推荐
- eclipse指定启动的jdk
原文:http://my.oschina.net/noday/blog/203987 到eclipse目录,打开eclipse.ini文件,在指定位置加入你的jdk相关文件(如下面示例配置中-vm配置 ...
- asp.net中分页与存储过程的一些总结
一.接上文,使用的是jquery AJAX 进行分页 分页存储过程代码如下: ALTER PROCEDURE [dbo].[USP_GetAlbumByPage] @pageIndex int,--当 ...
- .Net 内存泄露
一.事件引起的内存泄露 1.不手动注销事件也不发生内存泄露的情况 我们经常会写EventHandler += AFunction; 如果没有手动注销这个Event handler类似:EventHan ...
- TFS build dotCover StyleCop
FS2010 – Customizing the Build Details View – Summary View http://blogs.msdn.com/b/jpricket/archive/ ...
- android学习视频分享
最近整理了大量的安卓开发学习资料,有书籍有视频有代码,老罗的第一季有点老了, 这里就给大家分享下老罗的第二季的视频教程吧,还有源码,初级到高级程序猿都有用. 下载地址:http://51pansou. ...
- mysql查询语句(mysql学习笔记七)
Sql语句 一般顺序GHOL : group by,having ,order by,limit 如果是分组,应该使用对分组字段进行排序的group by语法 ...
- 打印日志 Log
Log.v(tag,msg);所有内容 Log.d(tag,msg);debug Log.i(tag,msg);一般信息 Log.w(tag,msg);警告信息 Log.e(tag,msg);错误信息
- How to executing direct SQL statements [Axapta, AX4.0, AX2009, AX2012]
Today I want to talk about executing SQL statements in X++ on both the current AX database and exter ...
- JLink V8初始化exynos4412脚本
/** ****************************************************************************** * @author Maox ...
- python匿名函数(lambda)
简单来说,编程中提到的 lambda 表达式,通常是在需要一个函数,但是又不想费神去命名一个函数的场合下使用,也就是指匿名函数 当我们在传入函数时,有些时候,不需要显式地定义函数,直接传入匿名函数更方 ...