jQuery的ready方法实现原理分析

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"); 
	}
},
时间: 2024-10-03 09:00:35

jQuery的ready方法实现原理分析的相关文章

jquery ready方法实现原理 内部原理

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

jquery更改ready方法调用顺序,在ready之后执行Js代码

*/--> jquery更改ready方法调用顺序,在ready之后执行Js代码 Table of Contents 问题描述 在所有的ready方法之后执行上面的方法 重写$.fn.ready方法 查看$.fn.ready的源码定义 修改自己的$.fn.ready 闭包,增加安全性 问题描述 我想要控制Input,回车不提交表单,思路如下: $(function(){ $("form input").on("keypress",function(event)

【JS】怎样用原生JS实现jQuery的ready方法

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,只是与window.onload方法还是有差别的. 总的来说,window.onload()方法是必须等到页面内包含图片的全部元素载入完成后才干运行. $(document).ready()是DOM结构绘制完成后就运行,不必等到载入完成.   详细一些.能够从下面几方面对照它们的差别: 1.运行时间 window.onload必须等到页面内包含图片的全部元素载入完成后才干运

Android ListView实现不同item的方法和原理分析

ListView实现不同item的方法和原理分析 一问题抛出Listview是android里面的重要组件,用来显示一个竖向列表,这个没有什么问题:但是有个时候列表里面的item不是一样的,如下图,列表里面应该有3种类型的item  1. 头像在左边的气泡Item ,比如”今天下午我就不出来了,...”2. 头像在右边的气泡Item,比如”那就等着我发你好吧”3. 单张图片显示圆角图片item几种Item的风格是完全不同的,那么怎么实现呢? 二实现方法实现的方法我这里可以列举出两种1. 每个It

【JS】如何用原生JS实现jQuery的ready方法

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 总的来说,window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行.$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕.   具体一些,可以从以下几方面对比它们的区别: 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行

jQuery.extend()方法和jQuery.fn.extend()方法源码分析

这两个方法用的是相同的代码,一个用于给jQuery对象或者普通对象合并属性和方法一个是针对jQuery对象的实例,对于基本用法举几个例子: html代码如下: <!doctype html> <html> <head> <title></title> <script src='jquery-1.7.1.js'></script> </head> <body> <img src=''/>

jQuery.pushStack()原型方法源码分析

这次分析的方法跟前面不同,虽然pushStack也是原型方法之一,但是我们几乎从不用在页面调用,在参考手册里面也没有这个方法的使用说明,但是这个方法还是非常重要的,在使用很多jQuery的其他方式都会隐式的调用此方法: 它为以下方法提供支持:? ? jQuery 对象遍历:.eq()..first()..last()..slice()..map().? ? DOM 查找.过滤:.find()..not()..filter()..closest()..add()..andSelf().? ? DO

AjaxFileUpload 方法与原理分析

AjaxFileUpload需求 传统的form表单方式上传文件,  必然会刷新整个页面. 那么在不刷新界面的情况下实现文件的上传呢? 在 HTML4下, 聪明的程序员们发明了 ajax file upload 方式(form + hidden iframe方式), 为本文介绍的对象.  在HTML5中XMLHttpRequest实现了异步上传文件(介绍见 http://wenzhixin.net.cn/2013/11/28/ajax_file_upload_html5). 开源项目 官网为 h

hashmap冲突的解决方法以及原理分析:

在Java编程语言中,最基本的结构就是两种,一种是数组,一种是模拟指针(引用),所有的数据结构都可以用这两个基本结构构造,HashMap也一样.当程序试图将多个 key-value 放入 HashMap 中时,以如下代码片段为例: HashMap<String,Object> m=new HashMap<String,Object>(); m.put("a", "rrr1"); m.put("b", "tt9&q