原生js--文档加载时间
onload触发时机:文档和所有的图片都加载完毕
DOMContentLoaded触发时机:文档加载并解析完毕,所有deferred脚本执行完毕。但此时图片和async脚本可能依旧在加载。
readystatechange触发时机:
document.readyState属性包含多个状态,当值为“complete”时表明文档加载并执行完毕。
将事件绑定到DOMReady上的方法封装:
var whenReady = ( function(){
var funcs = [];
var ready = false;
function handler( e ){
if( ready ) return;
if( e.type === "readystatechange" && document.readyState !== "complete" ) return;
for( var i=0; i < funcs.length; i++ ){
funcs[i].call( document );
}
ready = true;
funcs = null;
}
if( document.addEventListener ){
document.addEventListener( "DOMContentLoaded", handler, false );
document.addEventListener( "readystatechange", handler, false );
window.addEventListener( "load", handler, false );
}else if( document.attachEvent ){
document.attachEvent( "onreadystatechange", handler );
window.attachEvent( "load", handler );
}
return function whenReady( f ){
if( ready ) f.call( document );
else funcs.push( f );
}
}() );
原生js--文档加载时间的更多相关文章
- js 文档加载完成之后执行 备用
//文档加载完成之后执行 (function(){ var _globeCallback; window.$$ = function(callback){ _globeCallback = callb ...
- 原生JS与jQuery文档加载完毕的写法
HTML是有执行顺序的,默认是自上而下执行.所以当我们的js代码在html代码下边的时候,可以正常执行,而当我们的js代码在html代码上边的时候,可以就无法正常执行了,这时,我们需要在文档加载完毕的 ...
- 使用js主函数的原因是等文档加载完了才给里面的元素添加东西 如果不使用主函数则文档加载时候无法找到元素则不能成功给元素添加事件
使用js主函数的原因是等文档加载完了才给里面的元素添加东西 如果不使用主函数则文档加载时候无法找到元素则不能成功给元素添加事件
- js坚持不懈之14:不要在文档加载之后使用 document.write()示例
在看w3school的JavaScript教程时,关于文档输出流中有这么一句话:绝不要在文档加载之后使用 document.write().这会覆盖该文档. 不太明白什么意思,找了一个例子: < ...
- JQuery文档加载完成执行js的几种方法
js中文档加载完毕.一般在body加一个onload事件或者window.onload = function () {} jQuery中有好多写法,平时也不注意,别人一问,还真觉得头大. 下面是我整理 ...
- 基于DOMContentLoaded实现文档加载完成后执行的方法
我们有时可能需要一些在页面加载完成之后执行的方法,其实js原生就提供了onload方法,所以我们最简单的办法就是直接给onload赋值一个函数,在页面加载完成之后就会自动执行 widnow.onloa ...
- jQuery文档加载完毕的几种写法
js中文档加载完毕.一般在body加一个onload事件或者window.onload = function () {} jQuery中有好多写法,平时也不注意,别人一问,还真觉得头大. 下面是我整理 ...
- jquery文档加载几种写法,图片加载写法
jquery文档加载写法: $(function(){ }) ; //个人最常使用方式 $(document).ready(function(){ }); //调用文档对象下的ready方法传入一个函 ...
- jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载
jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...
随机推荐
- Cisco交换机端口聚合(EtherChannel)
端口聚合,英文简称EtherChannel(以太通道)是由Cisco研发的,应用于交换机之间的多链路捆绑技术.它的基本原理是: 将两个设备间多条物理链路捆绑在一起组成一条逻辑链路,从而达到带宽倍增的目 ...
- Android 监听屏幕唤醒和关闭的广播
今天希望应用程序的服务运行时,可以监听到屏幕的唤醒.继续百度学习法,连同监听闭幕关闭也一同学习了. 此种情况需要动态注册系统广播.在AndroidManifest.xml中静态注册的实际运行中无效. ...
- XCode 5资源文件不自动更新问题
在xcode 5中的build settings ->build options ->Scan all source files and Includes设置为YES即可!
- 关于ARM NEON学习的一些资料
在对基于ARM-v7处理器及以上的程序进行优化时,可以使用neon优化技术来加速程序.不过搞这个的人比较少,所以网上有用的资料很稀少.我翻了半天国内国外的博客,发现还是ARM公司的帮助网站最有用: h ...
- [转]调试AngularJS应用
原文链接:Debugging AngularJS Apps from the Console 当我们开发AngularJS应用的时候,我们想在Chrome/FF/IE控制台调试隐藏在应用中的数据和服务 ...
- ClangFormat代码格式化
下载地址:https://github.com/travisjeffery/ClangFormat-Xcode 配合Xcode自带的格式化操作,就很不错了 选中内容组合操作: 第一步:ClangFor ...
- JDBC数据库基本操作
1.什么是JDBC? 在看JDBC的概念之前先来看看什么是数据库驱动. 数据库驱动中驱动的概念和平时听到的那种驱动的概念是一样的,比如平时购买的声卡,网卡直接插到计算机上面是不能用的,必须要安装相应的 ...
- 源码分析三(Vector与ArrayList的区别)
前面讨论过ArrayList与LinkedList的区别,ArrayList的底层数据结构是数组Object[],而LinkedList底层维护 的是一个链表Entry,所以对于查询,肯定是Array ...
- free命令的具体含义
https://www.cnblogs.com/thinkam/p/8407043.html https://blog.csdn.net/andy205214/article/details/7709 ...
- Strict Mode (JavaScript)
摘要: ECMAScript5中引入的严格模式,通过让JavaScript运行环境对一些开发过程中最常见和不易发现的错误做出和当前不同的处理,来让开发者拥有一个”更好”的JavaScript语言.但目 ...