`
k_lb
  • 浏览: 801995 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论
  • kitleer: 据我所知,国内有款ETL调度监控工具TaskCTL,支持ket ...
    kettle调度

jquery的ready()方法与 <body onload=""> 有什么区别?

阅读更多
请查看 http://qiusuozhe.com/archives/4391.html

一般情况下都是设置body标签的onload监听window的load事件.但load事件是要在页面的元素全部加载完了才触发的,如果页面上图片较多或图片太大,就会导致初始化的代码未被执行的时候用户就做了其它操作了. Jquery库提供了一个非常方便好用的函数( $(selector).ready()),让我们可以在页面的dom加载完后就可以做相应的操作(当然,这还得看用户浏览器的支持).,而不用等待全部元素加载完成.例如:
$(document).ready(function (){ alert('use in page script tag') }); 
$(document).ready(function (){ alert('use in import js file') }); 

现在让我们来研究一下这个函数的实现.
原理:
在jquery脚本加载的时候,会设置一个isReady的标记,监听DOMContentLoaded事件(这个不是什么浏览器都有的,不同浏览器,jquery运作方式不一样).当然遇到调用ready函数的时候,如果isReady未被设置,那就是说页面未加载完,就会把要执行的函数用一个数组缓存起来,当页面加载完后,再把缓存的函数一一执行.

jquery ready可以写好几个,每个都执行
onload只能写一个,你写好几个,也只执行一个,好像是执行最后一个
分享到:
评论

相关推荐

    窗口和表单事件.pptx

    &lt;body&gt; &lt;p&gt;窗口重置了 &lt;span&gt;0&lt;/span&gt; 次大小。&lt;/p&gt; &lt;p&gt;请尝试重置窗口大小,查看resize事件执行效果。&lt;/p&gt; &lt;button&gt;触发窗口的 resize 事件&lt;/button&gt; &lt;/body&gt; 1、窗口事件_ scroll事件 &lt;script&gt; x=0; $(document)....

    图库新版jQuery焦点图 JS代码

    document.write('&lt;a href="/zt/book/" target="_blank"&gt;&lt;img src="/images/300x90-02.jpg" width="300" height="90" /&gt;&lt;/a&gt;');} if (code=="in300x250"){ document.write('&lt;script type="text/javascript" &gt;BAIDU_...

    JQuery下关于$.Ready()的分析

    对于Body的Onload事件和JQuery的Ready方法相比,有很多弊端.比如: 1.加载多个函数的问题 &lt;body onload=”a();b();”&gt; &lt;/body&gt; 在Onload事件中只能这样加载,很丑陋…而在JQuery中你可以利用多个JQuery....

    jquery插件使用方法大全

    var b = $("&lt;p&gt;hello&lt;/p&gt;"); var c = document.createElement("table"); var tb = $(c); 编辑本段代替body标签的onload  这个惯例,也许是除了$()之外,用得最多的地方了。下面一段代码: 代码 $(document)....

    全面解析jQuery $(document).ready()和JavaScript onload事件

    对元素的操作和事件的绑定需要等待一个合适的时机,可以看下面的例子: &lt;!DOCTYPE html&gt; &lt;meta charset=utf-8&gt; &lt;...document.getElementById...&lt;div id=panel&gt;click me.&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;

    JQuery Tips相关(1)—-关于$.Ready()

     对于Body的Onload事件和JQuery的Ready方法相比,有很多弊端.比如: 1.加载多个函数的问题 &lt;body onload="a();b();"&gt; &lt;/body&gt;  在Onload事件中只能这样加载,很丑陋…而在JQuer

    jquery中的$(document).ready()使用小结

    [removed] = function(){ ... 相似,不同的是onload()的方法是在页面加载完成后才发生,这包括DOM元素和其他页面元素(例如图片)的加载,因此,使用document.ready()方法的执行速度比onload()的方法要快。 Javasc

    JavaScript的jQuery库中ready方法的学习教程

    学习 jQuery 有许多途径,我们今天从 jQuery 的 ready 函数开始。本例中的代码都来自于 jQuery 脚本库。 如果你使用过 jQuery , 就必然使用过 ready 函数,它用来注册当页面准备好之后可以执行的函数。 问题来啦,...

    jquery ready函数源代码研究

    一般情况下都是设置body标签的onload监听window的load事件.但load事件是要在页面的元素全部加载完了才触发的,如果页面上图片较多或图片太大,就会导致初始化的代码未被执行的时候用户就做了其它操作了. Jquery库提供...

    jquery ready(fn)事件使用介绍

    1、事件简介 (1)当DOM载入就绪可以查询及操纵时绑定一... 2、事件格式 $(document).ready(function(){ //jQuery代码 }); 3、实例 代码如下: &lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

    jQuery页面加载初始化的3种方法(推荐)

    jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁。 第一种: $(document).ready(function(){ alert&#40;"第一种方法。"&#41...

    jqzoom放大镜插件.zip

    if($('div.jqZoomPup').length &lt;= 0) { lens = new Lens(); } //if(settings.zoomType == 'innerzoom'){lens = new Lens()}; lens.activate(); (settings.alwaysOn) ? lens.center() : lens.setposition(null...

    jQuery的文档处理程序详解

    所谓的文档处理程序,是指jQuery中提供的$(document).ready事件,此事件会在dom加载完毕后触发,而[removed]和body.onload都是在页面完全加载后触发。 jQuery文档处理程序介绍 在jQuery中想实现在DOM加载完毕后的...

    运用jQuery实现的Ajax无刷新删除和添加数据的表单

    ---DOM载入就绪可以查询及操纵时执行该操作|等同window.load,确保在body元素的onload事件中没有注册函数,否则不会触发$(document).ready()事件。  用到了一个JS脚本库,主要就是设置各个验证项的正则表达式,基本...

    IE6已终止操作问题的2种情况及解决

    令人崩溃的IE6问题再次出现,打开某个页面时,弹出提示... 解决:通过onload或jquery.ready事件,在页面加载完成后执行JS方法。 总结:应该是浏览器在解析JS的过程中,出现了使其崩溃的错误。 告诫自己:提示信息“Int

Global site tag (gtag.js) - Google Analytics