判断JS是否加载完成
在正常的加载过程中,js的加载都是同步的,也就是在加载过程中,浏览器会阻塞接下来的内容的加载。这时候我们就要用到动态加载,动态加载是异步的,如果我们在后边要用到这个动态加载的js文件里的东西,就要保证这个文件加载完成后,再执行下面的内容。
如何判断js是否加载完成?(实现loadScript(url,callback)异步加载脚本,完成后执行回调函数,要求支持IE)
我们使用document的readyState属性:document.readyState
readyState 属性返回当前文档的状态。
该属性返回以下值:
- uninitialized - 还未开始载入
- loading - 载入中
- interactive - 已加载,文档与用户可以开始交互
- complete - 载入完成 (loaded)
原生JS:
function loadScript(url,callback){
var script=document.createElement('script');
script.type='text/javascript';
script.async='async';
script.src=url;
document.body.appendChild(script);
if(script.readyState){ //IE
script.onreadystatechange=function(){
if(script.readyState=='complete'||script.readyState=='loaded'){
script.onreadystatechange=null;
callback();
}
}
}else{ //非IE
script.onload=function(){callback();}
}
}
Jquery:使用 $.holdReady(true); $.getScript(); $.holdReady(false) 3个函数实现
$.holdReady(true); //hold住,等待a.js加载,后续代码不能执行
$.getScript('a.js',function(){
$.holdReady(false); //释放,a.js加载完成,继续执行后续代码
});
$.holdReady()函数表示 延迟加载。
判断JS是否加载完成的更多相关文章
- 外部引入的js 判断js脚本加载是否完成,完成后执行 相应的动作(以引入百度地图js为例)
可以使用JQuery的 $.getScript(url,function(){});方法 $.getScript("http://api.map.baidu.com/getscript?v= ...
- 如何判断js是否加载完全
var script=document.createElement('script'); if(script.onreadystatechange){ script.onreadystatechang ...
- js判断网页是否加载完毕 包括图片
<script type="text/javascript" language="JavaScript"> //: 判断网页是否加载完成 docum ...
- Js判断CSS文件加载完毕的实例教程
要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: 代码如下 复制代码 // 代码节选至se ...
- 【转】JS判断SWF,JPG加载完毕、兼容(Activex,plugIn)所有浏览器
JS判断SWF,JPG加载完毕.兼容(Activex,plugIn)所有浏览器 这里主要说下监听SWF的加载. 网上流传已久的监听方法,只能在IE(Activex插件下)下实现.在使用plugin的浏 ...
- 用JS实现判断iframe是否加载完成
本文出至:新太潮流网络博客 var iframe = document.createElement("iframe"); iframe.src = "blog.iinu. ...
- js 判断iframe是否加载完毕
js 判断iframe是否加载完毕 CreationTime--2018年9月13日15点30分 Author:Marydon 1.javascript实现 window.onload = fun ...
- JS判断图片是否加载完成三种方式
1.img的complete属性 轮询不断监测img的complete属性,如果为true则表明图片已经加载完毕,停止轮询.该属性所有浏览器都支持. <p id="p1"&g ...
- js下判断 iframe 是否加载完成的完美方法
一般来说,我们判断 iframe 是否加载完成其实与 判断JavaScript 文件是否加载完成. 采用的方法很类似: var iframe = document.createElement( ...
随机推荐
- XML与JSON的转换
-(void)test { //XML文本范例 NSString *testXMLString = @"Cake0.55RegularChocolateBluebe ...
- ie6兼容之绝对定位元素内容为空时高度问题
正常显示: ie6下显示: line6元素高度最小16px; 解决办法: 添加内容在空的div里,并且设置行高即可. 其中,非ie6浏览器不需要再空的div里加无谓的内容,再次需要用“条件注释”来解决 ...
- C语言语法之运算符及优先级
注:该内容整理自以下链接. http://blog.csdn.net/huangblog/article/details/8271791 表:C语言运算符及优先级 优先级 运算符 名称或含义 使用形式 ...
- .NET 4.5 WPF Ribbon
文/嶽永鹏 Visual Studio 2012 DO.NET 4.5 Ribbon 界面编程. 代码 =============================================== ...
- sphinx索引文件进一步说明——最好是结合lucene一起看,直觉告诉我二者本质无异
摘自:http://blog.csdn.net/cangyingzhijia/article/details/8592441 Sphinx使用的文件包括 "sph", " ...
- angular directive指令内的参数
angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priori ...
- PDF firefox转换器
- WCF事务应用[转]
在B2B的项目中,一般用户注册后,就有一个属于自己的店铺,此时,我们就要插入两张表, User和Shop表. 当然,要么插入成功,要么全失败. 第一步: 首先看一下项目的结构图: 第二步: 准备工作, ...
- asp.net页面跳转sessionid会变
今天发现在一个Asp.net站点中, 同一次登录, 不停刷新页面或者页面跳转, 此时后台Session的SessionID总是变化的. 创建一个页面,添加一个button,后台代码非常简单,如下 ...
- Top Five Hacker Tools Every CISO Should Understand
As the role of the CISO continues to evolve within organizations towards that of an executive level ...