onload 和 domready

博客地址：https://ainyi.com/46

window.onload 事件会在页面或图像加载完成后触发（即所有元素的资源都下载完毕）

如果页面上有许多图片、音乐或 falsh 还没加载完成，onload 事件就会迟迟无法触发

所以出现了 DOM Ready 事件

熟悉 jQuery的人，都知道 DomReady 事件

$(document).ready(function(){
  alert("jQuery 的 DOM 准备完毕，资源还没加载完");
})

DomReady

DomReady 事件就是在 DOM 文档结构准备完毕后触发，即在资源加载前触发

DOMContentLoaded

DOMContentLoaded 事件比 onload 事件快许多，它是在 DOM 准备完毕后触发（不需等待资源下载完毕）

DOMContentLoaded 事件在许多 Webkit 浏览器以及 IE9 上都可以使用，此事件会在 DOM 文档准备好以后触发，包含在 HTML5 标准中

对于支持此事件的浏览器，直接使用 DOMContentLoaded 事件是最简单最好的选择

IE6,7,8 都不支持 DOMContentLoaded 事件。所以目前所有的 hack 方法都是为了让 IE6,7,8支持 DOM Ready 事件

下面代码可以发现 jQuery 的 ready 事件稍微早于 DOMContentLoaded 事件，但都是实现了 domready 事件（dom 加载完毕，资源加载前触发）

document.addEventListener('DOMContentLoaded', function(){
  alert("DOM准备完毕，资源还没加载完");
}, false);
 
// jQuery 的 domready
$(document).ready(function(){
  alert("jQuery 的 DOM 准备完毕，资源还没加载完");
})
 
// 在 document 文档加载完成后就可以对 DOM 进行操作（即所有元素的资源都下载完毕）
window.onload = function(){
  alert("DOM 加载完毕，所有资源都下载完成");
}

// 或者经常用到的图片，假设这个
document.getElementById("imgID").onload = function(){
  alert("图片 id 为 imgID 加载完毕");
}

Dom Ready 和 Dom Load 两者的区别

1、Dom Ready 是在 dom 加载完成后就可以直接对 dom 进行操作，比如一张图片只要 img 标签完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等；

2、Dom Load 是在整个 document 文档（包括了加载图片等其他信息）加载完成后就可以直接对 dom 进行操作，比如加载一张图片，要等这个图标加载完成之后才能设置图片的宽高的属性或样式等；

onreadystatechange 事件

onreadystatechange 事件与 onload 一样，会在页面或图像加载完成后触发（即所有元素的资源都下载完毕），但是：

• FireFox 的 script 元素不支持 onreadystatechange 事件，只支持 onload 事件
• IE 的 script 元素支持 onreadystatechange 事件，不支持 onload 事件

在 IE 下，可以使用 onreadystatechange 完成 onload 事件，判断 readyState 是否等于 complete 或 loaded

document.onreadystatechange = function () {
  if (document.readyState === 'complete' || document.readyState === 'loaded') {
    alert('dom 和资源下载完毕')
  }
}

博客地址：https://ainyi.com/46