判断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( ...
随机推荐
- Kanzi入门
1.安装Kanzi. 2.使用Kanzi studio创建工程. Kanzi创建的工程会包含以下目录结构: 其中, Tool_project文件夹中存放的是设计师设计的工程,包含kanzi UI的工程 ...
- Linux文本流
Linux文本流 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 文本流 文件用于数据的存储,相当于一个个存储数据的房子.我们 ...
- win7下的ipython没有的问题
在笔记本上安装python2.7后,执行python是可以的,但是ipython却不行. 一.问题排查 在网上搜索了看到python与ipython的区别: 例如:ipython有tab补全功能,然后 ...
- 生物信息大数据&数据库(NCBI、EBI、UCSC、TCGA)
想系统的学习生信数据库可以先看一下北大的公开课,有一章专门讲的数据库与软件: -生物信息学:导论与方法 北大\ 生物信息数据库及软件资源 一个优秀的生信开发者能够解决如下问题: 如何鉴定一个重要的且没 ...
- 使用QTP测试Web对象
加载Web插件先启动QTP,再启动浏览器,否则Web元素识别不了最新版本QTP11支持的浏览器:IE:6.7.8Firefox:3.0.x.3.5.QTP支持直接访问DOM(Document Obje ...
- putty自动登录
如果没有公钥/密钥对,就用 PuTTYgen 创建一个,已经有了就可以忽略这一步.一个公钥/密钥对可以用在不同的服务器上,所以也不需要重复创建,关键要有足够强健的密码和安全的存放. 象先前一样输入帐户 ...
- web组件
慕课网:http://www.imooc.com/learn/99 js 在实战中的分层: 应用层 框架组件-框架通用组件.定制组件.独立组件 框架core(框架核心层) 浏览器底层
- Js获取后台集合List的值并操作html
功能:将后台传到前端JSP的List中的float型数值转换为百分比显示 HTML代码: <s:iterator value="colorConfigList" status ...
- Nginx reopen reload作用及工作过程
http://www.iigrowing.cn/nginx-reopen-reload-zuo-yong-ji-gong-zuo-guo-cheng.html Nginx reopen reload作 ...
- MVC5 + EF6 入门完整教程二:从前端的UI开始
从前端的UI开始 MVC分离的比较好,开发顺序没有特别要求,先开发哪一部分都可以,这次我们主要讲解前端UI的部分. ASP.NET MVC抛弃了WebForm的一些特有的习惯,例如服务器端控件,Vie ...