简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

浅析document.ready和window.onload的区别讲解_基础知识

WBOY
Release： 2016-05-16 17:08:24
Original
1167 people have browsed it

Javascript 只有在DOM元素已经定义以后才可以对其执行某种操作，这个问题在“javascript执行顺序里”http://www.jb51.net/article/44577.htm一文里有详细介绍。

jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行。比如在"jQuery基础 - 如何开始"一文里，我用到如下jQuery代码：

复制代码 代码如下:



这段代码的意思是：当Dom Tree加载完成后，显示警告信息。

document.ready()和传统的方法

相似，不同的是onload()的方法是在页面加载完成后才发生，这包括DOM元素和其他页面元素（例如图片）的加载，

因此，使用document.ready()方法的执行速度比onload()的方法要快。

最后要注意两点（来自jQuery文档）：

1.确保在

元素的onload事件中没有注册函数，否则可能不会触发$(document).ready()事件。(
我尝试用下面的例子来演示这个情况，但是没有成功，所以我想这种情况只是可能发生。)

复制代码 代码如下:



My second jQuery


 
 

jQuery 简单例子2

 

I would like to say:

 

 

2.可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。
Related labels：
document.ready window.onload
source：php.cn
Previous article：jquery 提示信息显示后自动消失的具体实现_jquery Next article：浅谈Javascript 执行顺序_基础知识
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
javascript - JQuery中，每个功能写一个document.ready，还是所有功能放到一个ready中？ 如题，在一个js文件中定义了很多函数（JQuery）,示意代码如下： {代码...} 大家推荐哪种写法？为什么？
From 2017-04-11 13:22:01
0
2
161
javascript - chrome 回退前进按钮不触发onpopstate事件 我发现chrome下点击浏览记录回退或者前进按钮有时候不能触发popstate事件. 比如我在A页面点击了一个h链接导致B页面加载了. 然后在按回退按钮, 此时A页面又被重新加载回...
From 2017-04-11 13:16:53
0
0
1091
javascript onclick事件调取一个在document.ready里的function {代码...} 要实现的功能是点击input调取ttt() 请问各位怎么样能实现呢?
From 2017-04-10 17:28:48
0
3
307
用javascript调用通讯，等待超时的时候，能否提前显示页面内容？ 我在document.ready()里调用一个后台的通讯，如果有通讯故障导致等待超时，此时浏览器页面一直空白，不显示，直到超时结束。 但如果我在调用通讯前，alert一下。那么即使...
From 2017-04-10 12:47:31
0
4
350
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！