不灭的焱

革命尚未成功,同志仍须努力下载JDK17

作者:php-note.com  发布于:2022-06-19 11:00  分类:HTML/CSS/JS  编辑

在js和jQuery使用中,经常使用到页面加载完成后执行某一方法。通过整理,大概是五种方式(其中有的只是书写方式不一样)。

(1) 使用jQuery的$(function){});

(2) 使用jQuery的$(document).ready(function(){});

前两者本质上没有区别,第1种是第2种的简写方式。两个是document加载完成后就执行方法。

(3) 使用jQuery的$(window).load(function(){});

(4) 使用window.onload = function(){}

第3种和第4种都是等到整个window加载完成执行方法体。两者也没有区别,只是一个使用dom对象,一个使用jQuery对象。

(5)在标签上静态绑定onload事件,<body onload=”aaa()”>等待body加载完成,就会执行aaa()方法。  

那么,这五种方式,执行的先后顺序是怎么样的呢?

通过下方代码验证发现:

  • 使用第一种 jQuery的$(function){}) 和第二种 jQuery的$(document).ready(function(){});无论位置放置在哪里,总是优先其余三种方式(原因是:这两种方式是在document加载完成后就执行,后三种是等到整个window页面,如图片、视频等资源加载完成后才执行),这两者之间的执行顺序是谁在上方谁优先执行。
  • 使用第三种 jQuery的$(window).load(function(){});和第四种 window.onload = function bbb(){}这两种方式,总是优先于<body onload=”aaa()”>执行。他们两者执行顺序也是根据谁在上方谁先执行。
  • 使用第五种 <body onload=”aaa()”>总是最后执行。

代码:

<script type='text/javascript'>

  window.onload = function(){ 
    alert("页面加载完成====》onload"); 
  }

  $(window).load(function(){ 
    alert("jquery===》window load" ); 
  })

  $(document).ready(function () { 
    alert("jquery====》document ready"); 
  });

  $(function(){ 
    alert("jquery====》document onload"); 
  });

  function aaa(){ 
    alert("静态标签====》onload"); 
  }

</script>

<body onload="aaa()"></body>

 




jQuery ready()事件详解

当DOM准备就绪时,指定一个函数来执行。

.ready(handler)
  • handler类型: Function()当DOM准备就绪时,执行的一个函数。

.ready()方法提供了一种方法,使得一旦页面的文档对象模型(DOM)变为安全的操纵,就立即运行JavaScript代码。这往往是执行与页面的用户视图或交互之前需要任务的好时机,例如添加事件处理程序和初始化插件。当多个函数通过连续调用添加到该方法中,它们根据它们被添加的DOM准备就绪的顺序执行。在jQuery 3.0中,jQuery保证了在一个处理程序中的异常发生,不会妨碍后续添加的处理程序的执行。

大多数浏览器提供了DOMContentLoaded事件形式的类似功能。然而,jQuery的.ready()方法的不同之处在于它是一个重要并且有效的方法:在代码调用.ready(handler)之前,如果 DOM 已经准备就绪并且浏览器已经触发DOMContentLoadedhandler处理函数仍然会被执行。相反,如果DOMContentLoaded事件侦听器在这个事件触发后才被添加进来,那么这个DOMContentLoaded事件的处理程序将永远不会被执行。

浏览器还提供了window对象上的load事件。当这个事件触发时候,表明该网页上的所有资源已加载,包括图像。此事件可以使用jQuery的$(window).on("load", handler)监听。当代码依赖加载的资源情况下,(例如,必需知道图像的尺寸时),那么代码应放置在一个load事件的处理程序中。

值得注意的是,虽然 DOM 准备就绪(ready)总是在页面被完全加载之前,但是在已经生效执行的.ready()处理程序代码中绑定load事件侦听器,通常是不安全的。例如,在页面加载后,可以使用一些方法动态加载脚本,如$.getScript()。虽然动态加载的脚本中的.ready()处理程序始终会被执行,但是在动态加载脚本中的windowload事件已经触发过了,所以那些load事件监听器将永远不会运行。

jQuery提供了几种方法来绑定函数,当DOM已准备就绪时,绑定的函数将会运行。以下所有语法是等价的:

  • $(handler)
  • $(document).ready(handler)
  • $("document").ready(handler)
  • $("img").ready(handler)
  • $().ready(handler)

在jQuery 3.0 中,只建议使用第一种语法(注:即$(handler));其他语法仍然能正常工作,但已被标记为弃用(注:将来的某个版本会被删除)。这是因为,这些选择器跟.ready()方法的行为没有任何关系,这是低效的,并可能导致对该方法行为不正确的假设。例如,第三条语法中,"document"选择器其实什么也没选择。第四语法表示等待文档(document)准备就绪,但从代码上看,它暗示(错误地)等待图像("img")准备就绪。

还有$(document).on("ready", handler),从jQuery 1.8开始已被标记为弃用,在jQuery 3.0中已经被删除。请注意,如果附加此事件之前,DOM 已经准备就绪,该处理程序将不被执行

.ready()方法通常用于一个匿名函数:

$( document ).ready(function() {
    // Handler for .ready() called.
});

这等价于调用推荐的方式:

$(function() {
    // Handler for .ready() called.
});

在 jQuery 对象别名上使用

$快捷方式不再可用时,$.noConflict()可以用于避免命名空间冲突。然而,传递给.ready()的处理函数可以传递一个引用jQuery对象的参数。这使得处理程序中能够使用jQuery对象,例如,用作$,这样就可以不用关心它的别名:

jq2 = jQuery.noConflict();
jq2(function( $ ) {
    // 在这个代码块中可以像往常一样使用 $ ;实际的jQuery 对象是 jq2 
});

例子

显示当DOM加载的信息。

<!DOCTYPE html>
<html>
<head>
  <style>p { color:red; }</style>
  <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
  <script>
  $(document).ready(function () {
  $("p").text("The DOM is now loaded and can be manipulated.");
});
  </script>
 
</head>
<body>
  <p>Not loaded yet.</p>
 
</body>
</html>

 

 

参考:

页面加载完成事件 -onload的五种写法小白知识_加载菜鸟指南

jQuery页面加载完毕后执行事件

jQuery ready()事件详解