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

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

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

复制代码 代码如下:

<!--   $(document).ready(function ()

         {  

          alert("我的第一个jQuery代码!");  

         });  
// -->

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

document.ready()和传统的方法<body onload=”load()”> 相似,不同的是onload()的方法是在页面加载完成后才发生,这包括DOM元素和其他页面元素(例如图片)的加载,

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

最后要注意两点(来自jQuery文档):

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

复制代码 代码如下:

<html>
<head>
<title>My second jQuery</title>
<mce:script type="text/javascript" src="/js/jquery.js" mce_src="js/jquery.js"></mce:script>
<mce:script type="text/javascript">
<!-- //下面是load的函数含有jquery注册函数$  
function load(){  $("p").append("<b>Hello</b>"); }  
//下面是jQuery的代码  
$(document).ready(function ()
{ $("p").append("我的第一个jQuery代码!"
); 
$("p").append("<b>Hello</b>");  });  // -->
</mce:script>
</head> 
<body onload="load()"> 
<h2>jQuery 简单例子2</h2> 
<p>I would like to say: </p> 
</body>
</html> 

2.可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。

时间: 2024-10-01 00:42:51

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

浅析document.ready和window.onload的区别

 这篇文章主要介绍了document.ready和window.onload的区别,有需要的朋友可以参考一下 Javascript 只有在DOM元素已经定义以后才可以对其执行某种操作.   jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行.比如在"jQuery基础 - 如何开始"一文里,我用到如下jQuery代码:    代码如下: <!--   $(document).ready(function ()            

jquery $(document).ready()和window.onload的区别浅析_javascript技巧

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间         window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.         $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同          window.onload不能同时编写多个,如果有多个window.onl

Jquery中$(document).ready()和window.onload的区别

最基本的区别 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同 window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 $(document).ready()可以同时编写多个,并且都可以得到执行 3.简化写法 window.onload没有简化写法 $(document).ready(function()

jquery $(document).ready() 与window.onload的区别

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间          window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.          $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕.  2.编写个数不同           window.onload不能同时编写多个,如果有多个window

jquery中的$(document).ready()与window.onload的区别_jquery

所以如果某个图片或者其他资源加载很长时间, 访问者就会看到一个不完整的页面, 甚至在图片加载之前就执行了需要依赖动态添加的元素的脚本而导致脚本错误.window.onload = function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">动态创建的div</div>"; } 解决办法就是等DOM被解析后, 在图像和外部资源加载之前执行我们的函数.在jQu

jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较_jquery

想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> <head > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>验证加载顺序</title> <script src=

window.onload和$(function(){})的区别介绍_基础知识

复制代码 代码如下: window.onload=function{} 表示页面加载完了后(包括dom和js),再执行函数里面的内容: 复制代码 代码如下: $(function(){}) 表示页面(dom)加载完了后,再执行函数里面的内容

javascript的document.referrer浏览器支持、失效情况总结_基础知识

在流量统计服务中都有Traffic source这个功能.Traffic source是针对访次级别的概念,换句话说,当访次建立的时候,landing page的流量来源即是该访次的Traffic source.虽然Traffic source有很多种,不过不幸的是依据现在JS,获得Traffic source的途径只有两种--document.referrer.window.opener.更不幸的是,window.opener适用的场景不多,而document.referrer非常的弱,以至于

JS函数定义方式的区别介绍_基础知识

关于JS的函数定义方式有以下两种: (1)典型的函数声明 function slide(arguments){ //...code } (2)以函数表达式的形式定义函数 var slide = function(arguments){ //...code } 虽然上面两种方式逻辑上是等价的,但是还是有点小区别: 区别一:例一中的函数会在代码执行以前被加载到作用域中,而例二则是在代码执行到那一行的时候才会有定 义: 区别二:函数声明会给函数指定一个名字,而函数表达式则是创建一个匿名函数,然后将这个