jQuery中的$(window).load()与$(document).ready()以及jquery $(document).ready() 与window.onload的区别
大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件。虽然$(document).ready 事件在大多数情况下都OK,但是它的解析顺序是在文档准备就绪,但文档中的图片等对象正在下载的时候开始运行的。所以在某些时候使 用$(document).ready事件并不一定能达到我们预期的效果,比如一些视觉效果和动画、拖拽、预读取隐藏图片等…通过使 用$(window).load事件便可以安全的在整个文档都准备就绪之后再开始运行你期望的代码。
$(window).load(function(){
// 将你希望在页面完全就绪之后运行的代码放在这里
});
jquery $(document).ready() 与window.onload的区别
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。
2.编写个数不同
window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
$(document).ready()可以同时编写多个,并且都可以得到执行
3.简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});
用$(window).load(function(){...})而不用body.onload()的几个理由
首先它们都是在页面所有元素(包括html标签以及引用到得所有图片,Flash等媒体)加载完毕后执行的,这是它们的共同点.
不用body.Onload()理由1:
如果我们想同时加载多个函数,我们必须这样写
<body onload="fn1(),fn2()"></body>看起来极其丑陋,如果用$(window).load()我们可以这样加载多个函数
$(window).load(function() { alert("hello,我是jQuery!"); }); $(window).load(function() { alert("hello,我也是jQuery"); });
不用body.Onload()理由2:
用body.Onload()不能够做到js和html完全分离,这是一个很严重的问题.
另外用$(window).load(function(){...})和body.onload()都存在同样一个问题,因为开始也说到了,它们都需要等到页面的所有内容
加载完毕才执行,但是如果当网速比较慢的时候,加载一个页面往往需要较长的时间(几秒到十几秒不等,甚至更长...),所以我们经常
会遇到页面还没有完全加载完毕而用户已经在操作页面了这种情况,这样页面表现出来的效果就跟我们预期的效果不一样了,
所以在这里我推荐使用$(document).ready(function(){}),或简写为$(function(){}),因为他会在页面的dom元素加载完毕后就执行,
而无需等到图片或其他媒体下载完毕.
但是有时候确实我们有需要等到页面的所有东西都加载完后再执行我们想执行的函数,所以是该使用$(window).load(function(){...})还是
该使用$(function(){})往往需要结合具体需要而作不同的选择.
最后附上一段在所有DOM元素加载之前执行的jQuery代码
<script type="text/javascript"> (function() { alert("DOM还没加载哦!"); })(jQuery) </script>
jquery的$(window).load和原生js的window.onload的使用方法:
$(window).load(function() { //jquery代码 });
window.onload=function(){ var obj=document.getElementById("TableA").getElementsByTagName("td"); if(!obj){return false} for(var i=0;i<obj.length;i++){ obj[i].onfocus=function(){this.style.background="#ff0000"} obj[i].onblur=function(){this.style.background="";} } }
源:http://www.cnblogs.com/Chen-XiaoJun/articles/5829876.html
相关文章
- jQuery日期选择器插件date-input
- jquery学习以及下载链接
- JQuery - CheckBox Prop 和 attr 的区别
- jQuery源码分析系列(35) : Ajax - jsonp的实现与原理
- JQuery实现对html结点的操作(创建,添加,删除)
- jquery改造轮播图1
- 使用jquery的方法和技巧
- jQuery模拟原生态App上拉刷新下拉加载
- jquery bind、delegate、live、on的区别及联系
- jQuery中的.bind()、.live()和.delegate()之间区别分析
- jquery.fn.extend与jquery.extend用法与区别
- 前端-jQuery-事件操作
- jQuery温习篇---强大的JQuery选择器
- jQuery图片延迟加载插件:jquery.lazyload
- jQuery find 和 filter 方法的区别
- Jquery中$(document).ready()和window.onload的区别
- JavaScript学习总结(五)——jQuery插件开发与发布
- jQuery.extend和jQuery.fn.extend的区别?
- jQuery bind命名空间
- Jquery中$与$.fn的区别
- 四个 jQuery 方法:
- jQuery 选择器
- jQuery实现当按下回车键时绑定点击事件
- jQuery重点知识整理
- jquery.js和jquery.min.js的区别介绍