jQuery ready方法实现原理详解

2024-07-29 15:21:52

今天闲来无事研究研究jQuery.ready()的内部实现，看JQ的源码一头雾水，由于自己很菜了，于是翻了翻牛人的播客，讲述详细，收获颇多。

先普及一下jquery.ready()和window.onload，window.onload事件是在页面所有的资源都加载完毕后触发的. 如果页面上有大图片等资源响应缓慢, 会导致window.onload事件迟迟无法触发.所以出现了DOM Ready事件. 此事件在DOM文档结构准备完毕后触发, 即在资源加载前触发.

jQuery中的ready方法实现了当页面加载完成后才执行的效果，但他并不是window.onload或者doucment.onload的封装，而是使用标准W3C浏览器DOM隐藏api和IE浏览器缺陷来完成的，首先，我们来看jQuery的代码

DOMContentLoaded = function()
 {
  //取消事件监听，执行ready方法
 if ( document.addEventListener )
 {
  document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
  jQuery.ready();
 }
  else if ( document.readyState === "complete" )
 {
  document.detachEvent( "onreadystatechange", DOMContentLoaded );
  jQuery.ready();
 }
};

jQuery.ready.promise = function( obj ) {
 if ( !readyList ) {

  readyList = jQuery.Deferred();
   //表示页面已经加载完成，直接调用 ready方法
  if ( document.readyState === "complete" ) {
   //将 jQuery.ready压入异步消息队列，设置延迟时间1毫秒（注意，有些浏览器延迟不能小于4毫秒）
   setTimeout( jQuery.ready);
  }
  else if ( document.addEventListener ) //
  {
    //监听DOM加载完成
   document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
    //这里是为了确保所有ready执行结束，如果DOMContentLoaded方法执行了，将有一个状态值 isReady被设置为true,因此，
    //ready方法一旦执行，那么将只执行一次，window.addEventListener中的ready 将被 return 中断
   window.addEventListener( "load", jQuery.ready, false );

  } else {
   //低版本的IE浏览器
   document.attachEvent( "onreadystatechange", DOMContentLoaded );
   window.attachEvent( "onload", jQuery.ready );

   var top = false;

   try {
    top = window.frameElement == null && document.documentElement;
   } catch(e) {}

   if ( top && top.doScroll ) //剔除iframe的成分
   {
    (function doScrollCheck() {
     if ( !jQuery.isReady ) {

      try {
       //根据bug来兼容低版本的IE http://javascript.nwbox.com/IEContentLoaded/
       top.doScroll("left");
      } catch(e) {
       //由于低版本的IE 浏览器，onreadystatechange事件不可靠，因此需要根据各个bug来判断页面是否已加载完成
       return setTimeout( doScrollCheck, 50 );
      }

      jQuery.ready();
     }
    })();
   }
  }
 }
 return readyList.promise( obj );
};

ready: function( wait )
 {

 if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) {
  //判断页面是否已完成加载并且是否已经执行ready方法
  return;
 }

 if ( !document.body ) {
  return setTimeout( jQuery.ready );
 }

 jQuery.isReady = true; //指示ready方法已被执行

 if ( wait !== true && --jQuery.readyWait > 0 ) {
  return;
 }

 readyList.resolveWith( document, [ jQuery ] );

 if ( jQuery.fn.trigger ) {
  jQuery( document ).trigger("ready").off("ready");
 }
},

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

模拟jQuery中的ready方法及实现按需加载css,js实例代码

一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的源码,涉及到的模块比较多,(水平有限)代码比较难看懂:自己结合了一些书籍内容,总结一下.先说一下ready函数的实现思路:变量ready通过表达式赋值,右侧为一个自执行匿名函数,在这个匿名函数中,首先为各个浏览器的事件绑定处理函数,并为isReady赋值(根据事件异步处理程序来确定),然后返回一个传参闭包,在闭包中,主要判断isReady值来执行操作,如果dom
jQuery的ready方法实现原理分析

jQuery中的ready方法实现了当页面加载完成后才执行的效果,但他并不是window.onload或者doucment.onload的封装,而是使用标准W3C浏览器DOM隐藏api和IE浏览器缺陷来完成的,首先,我们来看jQuery的代码 DOMContentLoaded = function() { //取消事件监听,执行ready方法 if ( document.addEventListener ) { document.removeEventListener( "DOMContent
javascript 模拟JQuery的Ready方法实现并出现的问题

dom加载完后执行,一直不了解,基于对网上的一些方法逻辑不了解,所以去看了<jquery源代码研究(ready函数) >这篇文章后自己写入如下代码(已有详细说明) 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
jQuery的ready方法详解

jQuery中的ready方法实现了当页面加载完成后才执行的效果,但他并不是window.onload或者doucment.onload的封装,而是使用标准W3C浏览器DOM隐藏api和IE浏览器缺陷来完成的,首先,我们来看jQuery的代码复制代码代码如下: DOMContentLoaded = function() { //取消事件监听,执行ready方法 if ( document.addEventListener ) {
JavaScript的jQuery库中ready方法的学习教程

学习 jQuery 有许多途径,我们今天从 jQuery 的 ready 函数开始.本例中的代码都来自于 jQuery 脚本库. 如果你使用过 jQuery , 就必然使用过 ready 函数,它用来注册当页面准备好之后可以执行的函数. 问题来啦,我们的页面什么时候准备好了呢? onload 事件最基本的处理方式就是页面的 onload 事件,我们在处理这个事件的时候,可以有多种方式,即可以通过 HTML 方式,直接写在 body 元素的开始标记中,也可以使用事件注册的方式来使用,这又可以分为
jQuery ready方法实现原理详解

今天闲来无事研究研究jQuery.ready()的内部实现,看JQ的源码一头雾水,由于自己很菜了,于是翻了翻牛人的播客,讲述详细,收获颇多. 先普及一下jquery.ready()和window.onload,window.onload事件是在页面所有的资源都加载完毕后触发的. 如果页面上有大图片等资源响应缓慢, 会导致window.onload事件迟迟无法触发.所以出现了DOM Ready事件. 此事件在DOM文档结构准备完毕后触发, 即在资源加载前触发. jQuery中的ready方法实现了
jQuery ready方法实现原理详解

今天闲来无事研究研究jQuery.ready()的内部实现,看JQ的源码一头雾水,由于自己很菜了,于是翻了翻牛人的播客,讲述详细,收获颇多. 先普及一下jquery.ready()和window.onload,window.onload事件是在页面所有的资源都加载完毕后触发的. 如果页面上有大图片等资源响应缓慢, 会导致window.onload事件迟迟无法触发.所以出现了DOM Ready事件. 此事件在DOM文档结构准备完毕后触发, 即在资源加载前触发. jQuery中的ready方法实现了
jQuery:unbind方法的使用详解

jQuery:unbind方法的使用详解一.前言 unbind方法只能解绑用jQuery的bind方法以及用jquery方法注册的事件处理程序.比如:$('a').click(function(){})可以通过unbind解绑.用原生addEventListener以及IE下的attachEvent注册的事件以及使用onclick/onmouseover属性绑定的事件不能通过unbind进行解绑. 例如: 以下的事件可以通过unbind解绑: $('a').click(function(){}
Java钩子方法概念原理详解

这篇文章主要介绍了Java钩子方法概念原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下钩子方法源于设计模式中模板方法(Template Method)模式,模板方法模式的概念为:在一个方法中定义一个算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以在不改变算法结构的情况下,重新定义算法中的某些步骤.其主要分为两大类:模版方法和基本方法,而基本方法又分为:抽象方法(Abstract Method),具体方法(Concrete Me
jQuery on()方法使用技巧详解

jQuery on()方法是官方推荐的绑定事件的一个方法. 复制代码代码如下: $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法有. 复制代码代码如下: bind() $("p").bind("click",function(){ alert("The paragraph was clicked."); }); $("p").on(
javascript跨域的4种方法和原理详解

下表给出了相对http://store.company.com/dir/page.html同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 一.通过jsonp跨域在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的. 比如,有个a.html页面,它里面的代码需要利用ajax获取一个不同域上的json数据,假设这个json数据地址是http://example.com
jquery.map()方法的使用详解

原型方法map跟each类似调用的是同名静态方法,只不过返回来的数据必须经过另一个原型方法pushStack方法处理之后才返回,源码如下: map: function( callback ) { return this.pushStack( jQuery.map(this, function( elem, i ) { return callback.call( elem, i, elem ); })); }, 本文主要就是分析静态map方法至于pushStack在下一篇随笔里面分析: 首先了解下
Spring JdbcTemplate整合使用方法及原理详解

基本配置 JdbcTemplate基本用法实际上很简单,开发者在创建一个SpringBoot项目时,除了选择基本的Web依赖,再记得选上Jdbc依赖,以及数据库驱动依赖即可,如下: 项目创建成功之后,记得添加Druid数据库连接池依赖(注意这里可以添加专门为Spring Boot打造的druid-spring-boot-starter,而不是我们一般在SSM中添加的Druid),所有添加的依赖如下: <dependency> <groupId>com.alibaba</gro
jQuery中each方法的使用详解

概述: each() 方法规定为每个匹配元素规定运行的函数. 返回 false 可用于及早停止循环,相当于break. 返回 true 可以结束本次循环,相当于continue. 语法: $(selector).each(function(index,element){ }) index - 选择器的 index 位置 element - 当前的元素(也可使用 "this" 选择器) $(selector).each(function(){ }) $.each(array,functi
Java binarysearch方法原理详解

这篇文章主要介绍了Java binarysearch方法原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下首先数组排序需要import java.util.Arrays类 binarysearch有两个用法,一个是在整个数组里搜索,一个是在指定范围搜索,其实都是差不多的,可以将前者视为后者的特殊情况. 用法1 binarySearch(Object[], Object key) Object是目标数组,key是目标值,要求目标数组必须要

jQuery ready方法实现原理详解

相关推荐

随机推荐