jquery 的ready() 与window.onload()的区别
做web开发时常用Jquery中$(document).ready()和JavaScript中的window.onload方法,两者都是要在页面加载完成以后加载的方法,但是这两者还是有很大区别的。最近遇到了这样的问题,查询了多篇文章,做一下总结。
简单来说,要以用以下张表来表示 :
window.onload() | $(document).ready() | |
加载时机 |
必须等待网页全部加载完毕(包括图片等),然后再执行JS代码 |
只需要等待网页中的DOM结构加载完毕,就能执行JS代码 |
执行次数 |
只能执行一次,如果第二次,那么第一次的执行会被覆盖 |
可以执行多次,第N次都不会被上一次覆盖 |
举例 |
以下代码无法正确执行: window.onload = function() { alert(“text1”);}; window.onload = function() { alert(“text2”);}; 结果只输出第二个 |
以下代码正确执行: $(document).ready(function(){alert(“Hello”)}); 结果两次都输出 |
简写方案 | 无 | $(function () {}) |
一般情况下window的load()都是用来设置body标签的onload事件.但onload事件是要在页面的元素全部加载完了才触发的,这也包括页面上的图片,以及大的表格数据。如果页面上图片较多或图片太大,加载需要较多时间,就会导致页面无响应,或者用户做了其它操作了。
而Jeuery中的ready()则是在页面的dom(节点)加载完后就可以做相应的操作,而不用等待全部元素加载完成.比如只知道页面某处有一张图片,而不一定要等它显示出来就可以为它绑定点击方法。
load()一般不建议使用,这里主要讲一下( $(selector).ready())。
原理:
在jquery脚本加载的时候,会设置一个isReady的标记,监听DOMContentLoaded事件(这个不是什么浏览器都有的,不同浏览器,jquery运作方式不一样).当然遇到调用ready函数的时候,如果isReady未被设置,那就是说页面未加载完,就会把要执行的函数用一个数组缓存起来,当页面加载完后,再把缓存的函数一一执行.
Jquery中的详细代码分析:
ready: function(fn) {
// 绑定监听器
bindReady();
// 如果 DOM 加载完成
if ( jQuery.isReady )
// 马上运行此函数
fn.call( document, jQuery );
// 否则保存起来
else
// 把函数加入缓存数组中
jQuery.readyList.push( function() { return fn.call(this, jQuery); } );
return this;
}
当然,jquery对不同的浏览器dom加载完成的通知 bindReady()函数也是不同的
var readyBound = false;
function bindReady(){
if ( readyBound ) return;
readyBound = true; // Mozilla,opera,webkitnightlies支持DOMContentLoaded事件
if ( document.addEventListener && !jQuery.browser.opera)
// 直接使用事件回调即可
document.addEventListener( "DOMContentLoaded", jQuery.ready, false ); // 如果是ie并且不是嵌在frame中
// 就需要不断地检查文档是否加载完
if ( jQuery.browser.msie && window == top ) (function(){
if (jQuery.isReady) return;
try { document.documentElement.doScroll("left");
} catch( error ) { setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
})(); if ( jQuery.browser.opera )
document.addEventListener( "DOMContentLoaded", function () {
if (jQuery.isReady) return;
for (var i = 0; i < document.styleSheets.length; i++)
if (document.styleSheets[i].disabled) {
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
}, false); if ( jQuery.browser.safari ) {
var numStyles;
(function(){
if (jQuery.isReady) return;
if ( document.readyState != "loaded" && document.readyState != "complete" ) {
setTimeout( arguments.callee, 0 );
return;
}
if ( numStyles === undefined )
numStyles = jQuery("style, link[rel=stylesheet]").length;
if ( document.styleSheets.length != numStyles ) {
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
})();
} // A fallback to window.onload, that will always work
jQuery.event.add( window, "load", jQuery.ready );
}
}
这里最要注意的是,IE只有在页面不是嵌入frame中的情况下才和其它浏览器等一样,在DOM加载完成以后就执行$(document).ready()的内容。
参考文章:1、http://www.cnblogs.com/kingwell/archive/2012/09/09/2677252.html
2、http://blog.csdn.net/xiebaochun/article/details/36375481
jquery 的ready() 与window.onload()的区别的更多相关文章
- 转载jquery $(document).ready() 与window.onload的区别
jquery $(document).ready() 与window.onload的区别 投稿:mdxy-dxy 字体:[增加 减小] 类型:转载 时间:2009-12-28我要评论 Jquery中$ ...
- jQuery中的$(window).load()与$(document).ready()以及jquery $(document).ready() 与window.onload的区别
大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件.虽然$(document).ready 事件在大多数情况下都OK,但是它的解析顺序是在文档准备 ...
- [Javascript]jquery $(document).ready() 与window.onload的区别
引用:http://www.jb51.net/article/21628.htm Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload ...
- jQuery $(document).ready() 与window.onload的区别
ps:jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,虽然具有类似的效果,但是它们在触发操作的时间上存在着微妙的差异. 在j ...
- 转载 jquery $(document).ready() 与window.onload的区别
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 windo ...
- [转]jquery $(document).ready() 与window.onload的区别
http://blog.csdn.net/xiebaochun/article/details/36375481 Jquery中$(document).ready()的作用类似于传统JavaScrip ...
- jquery $(document).ready() 与window.onload的区别(转)
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 windo ...
- jQuery中$(document).ready()和window.onload的区别?
document.ready和document.load的区别?(JQ中的$(document).ready()和window.onload的区别?) window.onload,是采用DOM0级事件 ...
- jQuery $(document).ready()和window.onload
jQuery $(document).ready()和window.onload 根据ready()方法的API说明http://api.jquery.com/ready/. 这个方法接收一个func ...
随机推荐
- convert app to 64-bit for ios7
https://developer.apple.com/library/ios/documentation/General/Conceptual/CocoaTouch64BitGuide/Introd ...
- ios 限制输入长度
----------------UITextField限制输入的长度------------ - (BOOL)textField:(UITextField *)textField shouldChan ...
- memcached学习——分布式算法(Consistant hash + 虚拟节点)(三)
1.取余算法 优点:数据分布均匀缺点:当服务器动态的添加.删除节点或者某台server down掉,会导致命中率超大幅度下降,甚至导致服务不可用 2.Consistant Hash算法:一致性哈希算法 ...
- Jetty监控线程使用情况的配置
Jetty监控线程使用情况配置 第一步,配置xml文件 jetty-monitor.xml 参数说明: threads: 线程池中的线程 busyThreads: 使用中的线程 idleThreads ...
- maven 命令小记
mvn help:system mvn clean compile mvn clean test 测试 mvn clean package ...
- centos虚拟机NAT静态IP设置
宿主机为Centos6.3 64位,三台虚拟机为为Centos6.3 64位.虚拟机的网络连接方式为默认的NAT方式.虚拟机默认为DHCP方式动态获取IP.为了在三台虚拟机上搭建hadoop,需要将这 ...
- java.lang.OutOfMemoryError: Java heap space错误及处理办法(收集整理、转)
下面是从网上找到的关于堆空间溢出的错误解决的方法: java.lang.OutOfMemoryError: Java heap space ============================== ...
- Qt之加密算法
在写这篇文章之前,我曾反复思量关于加密的叫法是否准确,更为严格来说,应该是密码散列-将数据(如中英文字母.特殊字符)通过复杂的算法转换为另一种固定长度的值. QCryptographi ...
- DevExpress GridView.CustomSummaryCalculate 实现自定义Group Summary
--首发于博客园, 转载请保留链接 博客原文 DevExpress Documentation官方地址:GridView.CustomSummaryCalculate Event 1. 概要 界面上 ...
- response和request
请求响应流程图 response response是用来向客户端响应的对象! 需要回忆一下http响应内容: l 首行:状态码 l 响应头: 1头1值,1头多值: l 响应体(正文):html ...