jQuery $(document).ready()和window.onload

时间 2019-11-08

标签 jquery document ready window.onload window onload 栏目 JQuery 繁體版

原文原文链接

jQuery $(document).ready()和window.onload

根据ready()方法的API说明http://api.jquery.com/ready/。jquery

这个方法接收一个function类型的参数ready(handler), 方法的做用是: Specify a function to execute when the DOM is fully loaded.api

即当DOM加载完毕的时候,执行这个指定的方法.

　　由于只有document的状态ready以后,对page的操做才是安全的.

　　$(document).ready()仅在DOM准备好的时候执行一次.

　　与之相比,load事件会等到页面渲染完成执行,即等到全部的资源(好比图片)都彻底加载完成的时候.

　　 $(window).load(function(){…})会等整个页面,不单单是DOM,还包括图像和iframes都准备好以后,再执行.

　　而ready()是在DOM准备好以后就执行了,即DOM树创建完成的时候.因此一般ready()是一个更好的时机.

　　若是DOM初始化完成以后再调用ready()方法,传入的新的handler将会 当即执行.

　　 注意:ready()方法屡次调用,传入的handler方法会串联执行(追加).

　　而JavaScript中,window.onload是赋值一个方法,即后面的会覆盖掉前面的.

$(document).ready()的三种简写

　$( document ).ready( handler )
　$().ready( handler ) (this is not recommended)
　$( handler )

window对象和document对象

　Window对象表示浏览器中打开的窗口: http://www.w3school.com.cn/jsref/dom_obj_window.asp

　Document对象表示载入浏览器的HTML文档: http://www.w3school.com.cn/jsref/dom_obj_document.asp

Event对象

　　Event即事件,表明了各类状态: http://www.w3school.com.cn/jsref/dom_obj_event.asp

　　事件句柄使咱们能够在事件发生的时候附加一些操做和处理,好比按钮点击事件发生的时候,进行什么什么操做.

　　上面的参考连接中含有一个属性列表,对应各类事件,能够利用这些属性定义事件的行为.

　　本文关注的onload就是其中一个事件.

onload事件

　　onload事件: http://www.w3school.com.cn/jsref/event_onload.asp

　　onload事件是在加载完成后当即发生.(注意其中的l是小写).

　　支持该事件的标签是:

　　支持该事件的JavaScript对象是:

　　image, layer, window.

　　注意这里并无document.

onload使用解析

　　最经常使用的就是window.onload, 会等到整个页面及各类资源都加载完成以后再执行后面赋值的function行为.

　　另外,能够在标签中使用onload,好比:

<body onload="inlineBodyOnloadTimeCounter();">

　　其中inlineBodyOnloadTimeCounter()是一个自定义的JavaScript function.

　　注意jQuery ready()的API文档中有这么一段:

The .ready() method is generally incompatible with the attribute. If load must be used, either do not use .ready() or use jQuery's .load() method to attach load event handlers to the window or to more specific items, like images.

说明ready()方法和<body onload=“”>是不兼容的.浏览器

注：文章来源于转载。安全