判断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( ...
随机推荐
- 使用clusterprofile做聚类分析
library(clusterProfiler ) #cat test.txt gene_symbol EXOSC10ARHGEF10LVWA5B1SRRM1PTAFRCSMD2SH3GLB1GBP6 ...
- C#连接上sql server 2008 第一次实践
花了一早上的时间,终于连接上了我的本地数据库,我想应该记一下! 先贴个代码: using System; using System.Collections.Generic; using System. ...
- Model Binding
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- C\C++ 获取当前路径
C\C++ 获取当前路径 获取当前工作目录是使用函数:getcwd.cwd指的是“current working directory”,这样就好记忆了. 函数说明: 函数原型:char* getc ...
- runtime运行机制方法学习
runtime这玩意第一次听说时都不知道是什么,经过了解后才知道它就是oc动态语言的机制,没有它那oc就不能称为动态语言.在之前可能大家对runtime了解都不深,随着编程技能的日益加深和需要,大家开 ...
- python 中date datetime time 与str的互转
以下全部引入 form datetime import datetime, timedelta import time 一.time 转str 二.datetime 转 str str_date = ...
- TCP/IP协议学习(四) 协议概述
生活中有舒适区,借口成为懒惰的护身符,学习也有舒适区,逃避便是阻止进步的最大障碍. 经过半年多嵌入式方面的工作和学习,我提高了很多,但同时我也对自己所面临的问题逐渐清晰: 1. 偏于实践,理论基础不牢 ...
- git drupal eclipse
eclispe如何打补丁https://www.drupal.org/patch/apply打patch,初级详细教程https://www.drupal.org/node/620014
- 并发编程 02—— ConcurrentHashMap
Java并发编程实践 目录 并发编程 01—— ThreadLocal 并发编程 02—— ConcurrentHashMap 并发编程 03—— 阻塞队列和生产者-消费者模式 并发编程 04—— 闭 ...
- angularJS 报错: [ngModel:numfmt] http://errors.angularjs.org/1.4.1/ngModel/numfmt?p0=333
<!doctype html> <html ng-app="a10086"> <head> <meta charset="utf ...