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--文档加载时间的更多相关文章

  1. js 文档加载完成之后执行 备用

    //文档加载完成之后执行 (function(){ var _globeCallback; window.$$ = function(callback){ _globeCallback = callb ...

  2. 原生JS与jQuery文档加载完毕的写法

    HTML是有执行顺序的,默认是自上而下执行.所以当我们的js代码在html代码下边的时候,可以正常执行,而当我们的js代码在html代码上边的时候,可以就无法正常执行了,这时,我们需要在文档加载完毕的 ...

  3. 使用js主函数的原因是等文档加载完了才给里面的元素添加东西 如果不使用主函数则文档加载时候无法找到元素则不能成功给元素添加事件

    使用js主函数的原因是等文档加载完了才给里面的元素添加东西 如果不使用主函数则文档加载时候无法找到元素则不能成功给元素添加事件

  4. js坚持不懈之14:不要在文档加载之后使用 document.write()示例

    在看w3school的JavaScript教程时,关于文档输出流中有这么一句话:绝不要在文档加载之后使用 document.write().这会覆盖该文档. 不太明白什么意思,找了一个例子: < ...

  5. JQuery文档加载完成执行js的几种方法

    js中文档加载完毕.一般在body加一个onload事件或者window.onload = function () {} jQuery中有好多写法,平时也不注意,别人一问,还真觉得头大. 下面是我整理 ...

  6. 基于DOMContentLoaded实现文档加载完成后执行的方法

    我们有时可能需要一些在页面加载完成之后执行的方法,其实js原生就提供了onload方法,所以我们最简单的办法就是直接给onload赋值一个函数,在页面加载完成之后就会自动执行 widnow.onloa ...

  7. jQuery文档加载完毕的几种写法

    js中文档加载完毕.一般在body加一个onload事件或者window.onload = function () {} jQuery中有好多写法,平时也不注意,别人一问,还真觉得头大. 下面是我整理 ...

  8. jquery文档加载几种写法,图片加载写法

    jquery文档加载写法: $(function(){ }) ; //个人最常使用方式 $(document).ready(function(){ }); //调用文档对象下的ready方法传入一个函 ...

  9. jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载

    jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...

随机推荐

  1. [原创] GSM/GPRS 以及CDMA区分以及相关模块选型

  2. 制作U盘启动安装CentOS Linux系统

    制作U盘启动安装CentOS Linux系统 (特为老男孩教育&&51CTO学院在线三期同学而发) 方法一:使用UltraISO,将u盘做成启动盘 文件-->打开-->选择 ...

  3. iOS: Sorted Array with Compare

    Question(提问): What I want to do seems pretty simple, but I can't find any answers on the web. I have ...

  4. 腾讯QQ积分CSRF导致积分任意挥霍(我的积分为什么少了)

    触发点:http://jifen.qq.com/html5/index.html?ADTAG=JIFEN.MART.INDEX 随意兑换一个商品: 因为刚才我已经兑换过了,所以积分没有了.. 没关系, ...

  5. PHP上传压缩包并自解压方法

    1.PHP上传压缩包并解压的大概流程: 普通上传功能->上传到服务器->加载系统组件->找到上传的文件并执行解压命令->成功解压到目录 2.php执行系统命令的几类函数: (1 ...

  6. ios模拟器已安装但xcode无法显示

    最近把系统抹盘重装了, 然后用Time Machine恢复到原始状态, 一切安好, 但是使用xcode的时候发现一个模拟器都没有了: 各种折腾, 重装SDK啊, 重装xcode啊,最后发现, 如果你的 ...

  7. Deep Voice

    https://arxiv.org/abs/1702.07825 听起来和真人声非常接近了.

  8. 解决js中window.location.href不工作的问题

    E6中在html中<a>标识中通过JS添加click事件调用一个JS函数,例如: < script   type = "text/javascript" > ...

  9. BarTender数据中的转义符序列知识讲解

    Datamatrix是二维码的一个成员,广泛用于商品的防伪.统筹标识.如果为 Data Matrix 条形码指定的“符号类型”不是 ECC 200,则将会启用“字符集”选项.Data Matrix 也 ...

  10. 一个标准的,兼容性很好的div仿框架的基础模型!

    <!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" conten ...