码迷,mamicode.com
首页 > Windows程序 > 详细

window.onload和JQuery中$(function(){})的区别即其实现原理

时间:2017-12-26 20:57:14      阅读:238      评论:0      收藏:0      [点我收藏+]

标签:rom   http   div   str   listener   技术   listen   能力   size   

一、区别

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

window.onload和JQuery中$(function(){})的区别即其实现原理

标签:rom   http   div   str   listener   技术   listen   能力   size   

原文地址:https://www.cnblogs.com/chen-cong/p/8119642.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!