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. 推荐个office能在线预览的插件

    1.chrome  office viewer 这个可以离线使用 2.微软 office web app  可以使用微软在线服务器或则自己搭建服务器 有兴趣的朋友百度一下具体操作方法

  2. js模拟键盘事件

    <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8& ...

  3. EF学习和使用综合

    一.(引)你必须知道的EF知识和经验 二.(引)EF学习和使用(七)EF性能优化篇 三.(引)采用EntityFramework.Extended 对EF进行扩展(Entity Framework 延 ...

  4. GCT之数学公式(代数部分)

    一.代数部分: 1.复数 2.一元二次方程   3.数列 4.排列组合

  5. 在selenium中使用css选择器进行元素定位

    Sizzle Css3还提供一些直接选取form表单元素的伪类 :input: Finds all input elements (includes textareas, selects, and b ...

  6. Data Set Config配置元件

    右键点击Jmeter中需要参数化的某个请求,选择添加——配置原件——CSV Data Set Config,会添加一个CSV Data Set Config,需要设置相关的一些内容,具体如下:

  7. 【Machine learning】余弦相似度

  8. Postman测试api@RequestBody接收参数

    api postman 结果 { , "message": "Content type 'multipart/form-data;boundary=----------- ...

  9. go interface介绍

    http://legendtkl.com/2017/06/12/understanding-golang-interface/      深入理解 Go Interface http://legend ...

  10. WinForm创建自定义控件

    虽然VS为我们提供了很多控件可以使用,但有时候这些控件仍然不能满足我们的要求,比如我们要对部分控件进行一些个性化的定制,例如美化控件,这时候就需要自己绘制控件,或是在原有控件的基础上进行修改 自定义控 ...