判断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( ...
随机推荐
- struts的hello world小试
struts的hello world小试 前面jdk的安装和配置,tomcat的安装和配置以及java ide的安装和配置就不写了. 在项目中使用流程 创建一个Web项目 导如struts 2.0.1 ...
- hdu 4283 You Are the One 区间dp
You Are the One Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- HTML 方法
姓名输入框:<input type="text" value="默认有值"/> 密码输入框:<input type="text&qu ...
- JavaScript为input/textarea自定义hover,focus效果
<title>JavaScript为input/textarea自定义hover,focus效果</title> <script type="text/java ...
- linux 之SCP
一.从本地到远程复制 1.复制文件 * 命令格式: 1.scp -P remote_port local_file remote_username@remote_ip:remote_folder 或者 ...
- Linux 1
1. 使用虚拟控制台 登录后按Alt+F2键这时又可以看到"login:"提示符, 这个就是第二个虚拟控制台. 一般新安装的Linux有四个虚拟控制台, 可以用Alt+F1~Al ...
- python--安装PIL
PIL:Python Imaging Library,已经是Python平台事实上的图像处理标准库了.PIL功能非常强大,但API却非常简单易用. 安装PIL 在Debian/Ubuntu Linux ...
- IE下a标签跳转失败
最近又发现了一个IE和其他浏览器的不同点,IE中,<a></a>中无内容时,无法点击跳转,真是虐死我了,没想到下面这样写也会有兼容性,看来我要学的真的很多. <div i ...
- Load Runner11录制脚本出现乱码的解决方法
方法一: 1.录制的脚本出现乱码 Go to Vugen -> Tools -> Recording Options -> Advancedb) Check the option ...
- android 中 webview 怎么用 localStorage?
我在 android里面 使用html5的 localStorage 为什么存不进去也读不出来呀? 网上搜了好多都没效果 1 2 3 4 5 6 7 8 9 mainWebView = (WebVie ...