jquery中$ready和window.onload的区别

Question

如题所述

Answer 1

做web开发时常用Jquery中$(document).ready()和JavaScript中的window.onload方法，两者都是要在页面加载完成以后加载的方法，但是这两者还是有很大区别的。最近遇到了这样的问题，查询了多篇文章，做一下总结。
简单来说，要以用以下张表来表示 ：
Jquery的ready()与Javascrpit的load()
window.onload() $(document).ready()
加载时机
必须等待网页全部加载完毕（包括图片等），然后再执行JS代码

只需要等待网页中的DOM结构加载完毕，就能执行JS代码

执行次数
只能执行一次，如果第二次，那么第一次的执行会被覆盖

可以执行多次，第N次都不会被上一次覆盖

举例
以下代码无法正确执行：
window.onload = function() { alert(“text1”);};

window.onload = function() { alert(“text2”);};

结果只输出第二个

以下代码正确执行：
$(document).ready(function(){alert(“Hello”)});
$(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 functionsjQuery.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 functionsjQuery.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 functionsjQuery.ready();
})();
}// A fallback to window.onload, that will always workjQuery.event.add( window, "load", jQuery.ready );
}
}

Answer 2

onload需要全部加载完成；后面覆盖前面；

<script type="text/javascript">
    window.onload = function() {
        alert('HTML5学堂');
    }
    window.onload = function() {
        alert('码匠');
    }
</script>

ready只需要文档加载完成；不会发生覆盖；可以缩写；

<script type="text/javascript">
    $(document).ready(function() {
        alert('h5course-com');
    });
    $(document).ready(function() {
        alert('h5course-cn');
    });  
    // 简写
    $(function() {
        alert('学习HTML5，到HTML5学堂');
    });  
</script>