一、区别
window.onload 是在 DOM 树加载完成之后(DOM 树加载完不代表全部资源加载完,例如图片,音频和视频等还没加载)执行的。
在 Jquery 中 $(function(){}) 和 $(document).ready(function(){}) 的效果是一样,是在 DOM 树加载完成之后就会执行。所以 $(document).ready(function(){}) 是比 window.onload 要先执行的。那么 JQuery 中 $(document).ready(function(){}) 用原生 js 是怎么实现的呢?
二、实现
给 document 添加一个函数:
- document.ready = function (callback) {
- //兼容Firefox和Chrome
- if (document.addEventListener) {
- document.addEventListener('DOMContentListener', function () {
- document.removeEventListener('DOMContentListener', arguments.callee, false);
- callback();
- },false);
- }else if (document.attachEvent) {//兼容IE
- document.attachEvent('onreadystatechange', function () {
- if (document.readyState == 'complete') {
- document.detachEvent('onreadystatechange', arguments.calle);
- callback();
- }
- });
- }else if (document.lastChild == document.body) {
- callback();
- }
- }
(1)兼容 Firefox 和 Chrome
兼容 Firefox 和 Chrome,给 document 加一个事件监听,监听 DOMContentListener 事件,它是当初始的 html 文档被完全加载和解析后触发的事件,也就是 dom 树加载完后触发的事件。事件触发后移除监听执行 callback 函数。这里的 arguments 是函数内部的对象,代表当前函数参数的数组,arguments.callee 表示引用当前正在执行的函数。addEventListener/removeEventListener 的第三个参数默认为 false,false 表示在事件冒泡阶段处理事件处理程序,true 表示在事件捕获阶段处理。
(2)兼容 IE
兼容 IE,onreadystatechange 在 DOM 文档的 readyState 发生改变是触发的,readyState 有五种状态,"complete":全部资源加载完;"uninitialized":初始状态;"loading":资源加载中;"loaded":document 加载完成;"interactive":已加载并可与用户交互,但还需要加载图片等其他资源。看到这里是不是有个疑惑,在代码中我们写的是 if(document.readyState =="complete") 然后执行 callback,这不是在资源加载完后(包括图片等)后才执行 callback 吗?我们要实现的功能不是应该 readyState =="interactive" 时,即 DOM 树加载完成后执行 callback 的吗?这里我也很疑惑,然后就翻看 JQuery 的源码(虽然大多看不懂,只能看个大概),我发现他是这样写的
红色框的部分说:作者尝试过用 readyState == "interactive",但是造成了某些问题。
所以那就这样写吧,readyState == "complete"。
楼主能力有限,如有不正确的地方希望指出
兼容 Firefox 和 Chrome
来源: http://www.bubuko.com/infodetail-2441538.html