window.onload()
用于在网页加载完成后立即执行的操作,即当HTML文档加载完成后,立即执行某个方法。通常用于<body>元素,在页面完全加载后(包括图片,css文件等等)执行脚本代码。
只有一个要执行的函数语法:
window.onload = funcRef;
在页面加载完成后funcRef方法会被调用。
有多个要执行的函数语法:
在window.onload =函数(){
function1的();
function2();
function3();
.....
}
在页面加载完成后依次执行function1,function2,function3。
$(document).ready
当 DOM(document object model 文档对象模型)加载完毕且页面完全加载(包括图像)时发生 ready 事件。由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。如上面的实例所示。ready() 方法规定当 ready 事件发生时执行的代码。
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle();
});
}); 使用 ready() 来使函数在文档加载后是可用的
window.onload()和$(document).ready的区别:
jQuery函数:
$(document).ready(function(){
// 执行代码
});
或者
$(function(){
// 执行代码
});
JavaScript函数:
window.onload = function () {
// 执行代码
}
$(document).ready函数在 html 所有标签(DOM)都加载之后,就会去执行。
window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。
document.onDOMContentLoaded
当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded
事件被触发,而无需等待样式表、图像和子框架的完成加载。另一个不同的事件 load
应该仅用于检测一个完全加载的页面。 在使用 DOMContentLoaded
更加合适的情况下使用 load
是一个令人难以置信的流行的错误,所以要谨慎。注意:DOMContentLoaded
事件必须等待其所属script之前的样式表加载解析完成才会触发。