onload触发时机:文档和所有的图片都加载完毕

DOMContentLoaded触发时机:文档加载并解析完毕,所有deferred脚本执行完毕。但此时图片和async脚本可能依旧在加载。

readystatechange触发时机:

  document.readyState属性包含多个状态,当值为“complete”时表明文档加载并执行完毕。

将事件绑定到DOMReady上的方法封装:

  1. var whenReady = ( function(){
  2. var funcs = [];
  3. var ready = false;
  4.  
  5. function handler( e ){
  6. if( ready ) return;
  7. if( e.type === "readystatechange" && document.readyState !== "complete" ) return;
  8. for( var i=0; i < funcs.length; i++ ){
  9. funcs[i].call( document );
  10. }
  11. ready = true;
  12. funcs = null;
  13. }
  14.  
  15. if( document.addEventListener ){
  16. document.addEventListener( "DOMContentLoaded", handler, false );
  17. document.addEventListener( "readystatechange", handler, false );
  18. window.addEventListener( "load", handler, false );
  19. }else if( document.attachEvent ){
  20. document.attachEvent( "onreadystatechange", handler );
  21. window.attachEvent( "load", handler );
  22. }
  23.  
  24. return function whenReady( f ){
  25. if( ready ) f.call( document );
  26. else funcs.push( f );
  27. }
  28. }() );

原生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. 每天一个linux命令:wc命令

    Linux系统中的wc(Word Count)命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出. 1.命令格式: wc [选项]文件... 2.命令功能: 统计指定文件中的字节数. ...

  2. middle源码

    CREATE TABLE `middle` ( `id` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT, `innserSessionid` VARCHAR(250 ...

  3. .net 图片上传

      /// <summary>      /// asp.net上传图片并生成缩略图      /// </summary>      /// <param name=& ...

  4. linux cfs调度器_模型实现

    调度器真实模型的主要成员变量及与抽象模型的对应关系 I.cfs_rq结构体    a) struct sched_entity *curr        指向当前正在执行的可调度实体.调度器的调度单位 ...

  5. 2015-10-07:几乎100%肯定:百度网盘在夜间的时段是不限速的:早晨7点前很轻松达到3M/S,7点后就降低到1M/S了,白天才400K/S左右

    最近发现(2015-10-07)几乎100%肯定:百度网盘在夜间的时段是不限速的:早晨7点前很轻松达到3M/S,7点后就降低到1M/S了,白天才400K/S左右

  6. Android 安全提示 笔记

    http://developer.android.com/training/articles/security-tips.html1.数据存储内部存储internal storage存储的数据,只能由 ...

  7. UTF8与std:string互转

    Ajax请求发送的UTF8编码字符串传到后台使用std:string进一步处理,如果包含中文会出现中文乱码的问题: 特找了一下转码的解决方法,直接代码如下:  C++ Code  1234567891 ...

  8. z-index 层级关系

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

  9. 在Linux上安装SVN服务

    1.安装SVNyum install subversion 2.查看版本svnserve --version3.创建目录mkdir -p /web/svndata3.创建repo测试库svnadmin ...

  10. Linux+Redis实战教程_day03_Redis-set【重点】_有序set(了解)

    2.redis-set[重点] Java HashSet  无序,不重复. Redis操作中,涉及到两个大数据集合的并集,交集,差集运算. 赋值: l sadd key values[value1.v ...