结论:
页面加载完成有两种事件,一是 ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是 onload,指示页面包含图片等文件在内的所有元素都加载完成。
load 事件通常用于检测文档内容或者图片是否加载完毕。
网页中某些 Java Script 脚本代码往往需要在文档加载完成之后才能够去执行,否则可能导致无法获取对象的情况,为了避免类似情况的发生,可以使用以下两种方式:
(1). 将脚本代码放在网页的底端,运行脚本代码的时候,可以确保要操作的对象已经加载完成。
(2). 通过 window.onload 来执行脚本代码。
window.onload 是一个事件,当文档内容完全加载完成会触发该事件。
可以为此事件注册事件处理函数,并将要执行的脚本代码放在事件处理函数中,于是就可以避免获取不到对象的情况。
为 window.onload 事件绑定事件处理函数。绑定匿名函数绑定具名函数
- window.onload = function() {
- document.getElementById("bg").style.backgroundColor = "#F90";
- }
- window.onload = function myalert() {
- alert("绑定成功!");
- }
注意:不能绑定多个事件处理函数,最后一个会覆盖所有函数。
- window.onload = function a() {}
- window.onload = function b() {}
在文档加载后激活函数
- $(document).ready(function() {
- $(".btn1").click(function() {
- $("p").slideToggle();
- });
- });
定义和用法:当 DOM 已经加载,并且页面(包括图像)已经完全呈现时会发生 ready 事件。
由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。正如上面的例子中那样。
ready() 函数规定当 ready 事件发生时执行的代码。
ready() 函数仅能用于当前文档,因此无需选择器。
允许使用以下三种语法:
语法 1
- $(document).ready(function)
语法 2
$().ready(function)
语法 3
$(function)
不同点:
1、执行时间
window.onload 必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready() 是 DOM 结构绘制完毕后就执行,不必等到加载完毕。
2、编写个数不同
window.onload 不能同时编写多个,如果有多个 window.onload 方法,只会执行一个
$(document).ready() 可以同时编写多个,并且都可以得到执行
- window.onload = function() {
- alert("text1");
- };
- window.onload = fuction() {
- alert("text2");
- };
结果只能输出第二个,不能输出第一个,第一个被第二个覆盖。
- $(document).ready(function(){
- alert("text1");
- };
- $(document).readyfuction(){
- alert("text2");
- };
两个都能正确输出。
来源: https://www.2cto.com/kf/201712/709398.html