在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()方法。

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

通过下方代码验证发现：

使用1：jQuery的$(function){}和2：jquery的$(document).ready(function(){});无论位置放置在哪里，总是优先其余三种方式（原因是：这两种方式是在document加载完成后就执行，后三种是等到整个window页面加载完成后才执行），这两者之间的执行顺序是谁在上方谁优先执行。

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

　　　　4:window.onload = function bbb(){}这两种方式，总是优先于<body onload="aaa()">执行。他们两者执行顺序也是根据谁在上方谁先执行。

使用5：<body onload="aaa()">总是最后执行。

 1 <script type='text/javascript'>

 2

 3 　　window.onload = function(){

 4 　　　　alert("页面加载完成====》onload");

 5 　　}

 6

 7 　　$(window).load(function(){

 8 　　　　alert("jquery===》window load" );

 9 　　})

10

11 　　$(document).ready(function () {

12 　　　　alert("jquery====》document ready");

13 　　});

14

15 　　$(function(){

16 　　　　alert("jquery====》document onload");

17 　　});

18

19 　　function aaa(){

20 　　　　alert("静态标签====》onload");

21 　　}

22

23 </script>

本文链接：https://www.cnblogs.com/yifeixue/p/11543250.html

如转载文章，请注明出处，谢谢！

本文源自：https://www.cnblogs.com/Loveonely/p/8118256.html

js中页面加载完成后执行的几种方法及执行顺序的更多相关文章

  1. js中页面加载完成后执行的几种方式及执行顺序

    1:使用jQuery的$(function){}; 2:使用jquery的$(document).ready(function(){});前两者本质上没有区别,第1种是第2种的简写方式.两个是docu ...

  2. Javascript中页面加载完成后优先执行顺序

    Javascript中页面加载完成后优先执行顺序 document优先于windowwindow优先于element //document加载完成执行方法体 document.addEventList ...

  3. 关于 第三方接口支付的时候 采用post提交的方式，有两种 一种是通过 curl来进行，一种是通过js当页面加载完后跳转

    这是第一种.通过javascript页面加载完后,对表单采用 post方式提交给 第三方接口----- echo <<<_END<!DOCTYPE html PUBLIC &q ...

  4. js实现 页面加载 完成 后顺序 执行

    function addLoadEvent(func){ var oldonLoad = window.onload; if(typeof window.onload != 'function'){ ...

  5. js页面加载完后执行（document.onreadystatechange 和 document.readyState）

    js页面加载完后执行javascript(document.onreadystatechange 和 document.readyState) document.onreadystatechange ...

  6. 页面加载完毕后调用js方法进行布局操控 已实验

    页面加载完毕后调用js方法进行布局操控 已实验 $(function(){ var check1 = $("[id$=SMS]").is(':checked'); var bl=$ ...

  7. 转:JS线程和JS阻塞页面加载的问题

    前几日写了一篇文章,介绍了js阻塞页面加载的问题.当时是通过例子来验证的.今天,我介绍一下浏览器内核,从原理上介绍一下js阻塞页面加载的原因. 浏览器的内核是多线程的,它们在内核制控下相互配合以保持同 ...

  8. js判断页面加载完毕方法

    判断页面加载完成这个方法是很常见的,下面有三个常用的方法,各有利弊. 一.纯js方法 // (1).页面所有内容加载完成执行 window.onload = function(){ } // (2). ...

  9. 页面加载完成后，触发事件——trigger（）

    <button id="btn">点击我</button> <div id="test"></div> 如果页面 ...

随机推荐

  1. C#LeetCode刷题之#888-公平的糖果交换（Fair Candy Swap）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3758 访问. 爱丽丝和鲍勃有不同大小的糖果棒:A[i] 是爱丽丝 ...

  2. Flutter 容器(6) - FractionallySizedBox

    FractionallySizedBox 用法与SizedBox类似,只不过FractionallySizedBox的宽高是百分比大小,widthFactor,heightFactor参数就是相对于父 ...

  3. 用Unity3D实现太阳系仿真

    用Unity3D模拟太阳系仿真 模拟要求 写一个程序,实现一个完整的太阳系, 其他星球围绕太阳的转速必须不一样,且不在一个法平面上. 操作步骤 1.创建如下结构 sun 里包括8大行星, 并且设置好距 ...

  4. importTSV工具导入数据到hbase

    1.建立目标表test,确定好列族信息. create'test','info','address' 2.建立文件编写要导入的数据并上传到hdfs上 touch a.csv vi a.csv 数据内容 ...

  5. R 安装包的方法

    install.packages(packageName) install.packages(path_to_file, repos = NULL, type="source") ...

  6. python thread的join与setDeamon

    join t.start() t.join() Wait until the thread terminates. This blocks the calling thread until the t ...

  7. J20航模遥控器开源项目系列教程（三）开发说明 | 想要自己改造程序，扩充功能，怎么实现？

    我们的开源宗旨:自由 协调 开放 合作 共享 拥抱开源,丰富国内开源生态,开展多人运动,欢迎加入我们哈~ 和一群志同道合的人,做自己所热爱的事! 项目开源地址:https://github.com/C ...

  8. Mybatis_day2

    二 mybatis配置详解 MyBatis最关键的组成部分是SqlSessionFactory,我们可以从中获取SqlSession, 并执行映射的SQL语句.SqlSessionFactory对象可 ...

  9. Redis取出中文乱码问题

    直接打开Redis客户端,如果存储了中文的内容,取出时会发生乱码: 解决办法很简单,打开客户端时加上 --raw,这样就可以了: 顺便说一下,-a后面跟的是密码,打码了,各位见谅!

  10. 团队作业4：第二篇Scrum冲刺博客（歪瑞古德小队）

    目录 一.Daily Scrum Meeting 1.1 会议照片 1.2 项目进展 二.项目燃尽图 三.签入记录 3.1 代码/文档签入记录 3.2 Code Review 记录 3.3 issue ...