在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. 实战丨快速搭建实时 Todo List 应用

    技术背景 借助云开发数据库的实时推送能力和云开发官方出品的前后端一体化部署工具CloudBase Framework,可以轻松搭建一个完整应用. 效果展示 示例地址:http://cloud.qinm ...

  2. 一、常用的Dos命令

    # 查看目录下所有文件 dir # 切换目录 cd cd .. //返回上一级 # 清理屏幕 cls # 查询电脑ip地址 ipconfig # 退出终端 exit # 创建文件夹 md test # ...

  3. Clion C++ 乱码,debug乱码

    Clion新建项目,默认是使用UTF-8 Clion点击运行图标,使用的terminal不能正常显示UTF-8,因为其使用的是GBK编码 所以只要将源文件编码改为GBK就好了 1.界面右下角,有个UT ...

  4. Spring源码阅读 ------------------- SpringFrameWork 5.2 +IDEA 部署

    Spring作为JAVA学习者的必须学习和熟悉的框架,需要理解Spring的设计原理,核心设计模式,对于理解设计模式,面向对象的深入理解有着深远持久的影响,特此首先要做到本地部署源码开始,下面将介绍如 ...

  5. 【故障公告】阿里云 RDS 数据库突发 CPU 近 100% 引发全站故障

    今天晚上9点我们收到阿里云的告警通知: [阿里云监控]华东1(杭州)-云数据库RDS版<cnblogsdb> [instanceId=xxx] 于21:00 发生告警, 前往诊断 CPU使 ...

  6. rabbit rpm地址

    rabbitmq 官方源: https://dl.bintray.com/rabbitmq/rpm/rabbitmq-server/ erlang 清华源(包含erlang所有版本): https:/ ...

  7. HYSBZ - 2243 树链剖分 + 线段树 处理树上颜色段数

    用线段树处理颜色段数 记录区间内的颜色段数,区间右端点的颜色,区间右端点的颜色. int tr[maxn<<2], lc[maxn<<2], rc[maxn<<2] ...

  8. pandas外部数据的读取构造数据框-文本文件读取(一种utf-8中文编码乱码处理经验)

    上面一篇文章有记录pandas构造数据框的方式有二维数组,字典,嵌套的列表和元组等,本篇用于介绍通过外部数据读取的方式来构造数据框. python读取外部数据集的时候,这些数据集可能包含在文本文件(c ...

  9. 手写Promise简易版

    话不多说,直接上代码 通过ES5的模块化封装,向外暴露一个属性 (function(window){ const PENDING = 'pending'; const RESOLVED = 'fulf ...

  10. MPI实现Jacobi

    一.Jacobi迭代 #include<stdio.h> #include<mpi.h> #include<stdlib.h> #define totalsize ...