在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>

前端 页面加载完成事件 - onload，五种写法的更多相关文章

  1. jq常用事件（on,blur,focus,change）,js/jq等待图片(页面)加载完毕事件,js读取文件

    jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...

  2. js页面加载完成事件

    jquery的一种简写形式: $(function(){ alert("页面加载完成!"); });  其对应的完整形态为: $(document).ready(function( ...

  3. jQuery页面加载完毕事件及jQuery与JavaScript的比较

    1.jQuery概述 jQuery是一个JavaScript库,它集成了JavaScript.DOM.CSS和Ajax,简化了JavaScript编程,提倡write less, do more. 2 ...

  4. fakeLoader页面加载前loading演示8种效果

    提高用户体验的插件fakeLoader页面加载前loading演示8种效果 在线预览 下载地址 示例代码 <div id="main"> <div class=& ...

  5. JS 页面加载触发事件 document.ready和window.onload的区别

    document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ...

  6. JS 页面加载触发事件 document.ready和onload的区别（转）

    原博地址:http://blog.163.com/zhaoyanping_1125/blog/static/20132915320111129113723710/ * document.ready和o ...

  7. JS 页面加载触发事件 document.ready和onload的区别

    document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ...

  8. 页面加载之window.onload=function(){} 和 $(function(){})的区别

    通用的页面加载js有四种方式: 1.window.onload = function(){}; —-js 2.$(window).load(function(){});——Jquery 3.$(doc ...

  9. [Android] 按钮单击事件的五种写法

    在平时学习安卓的过程中,不论是看视频还是看博客,我发现每个人对代码的写法都有不同的偏好,比较明显的就是对控件响应事件的写法的不同.所以我想把这些写法总结一下,比较下各种写法的优劣,希望可以让自己可以灵 ...

随机推荐

  1. Duilib的圆环形 进度条 实现（网易云信版本）

    /** @file CircleProgress.h* @brief 圆环型进度条控件,圆环中间可以有文本(如85%)* @copyright (c) 2019-2022, NetEase Inc. ...

  2. wordpress搬家 更换域名

    结论:wordpress网站文件夹是和域名相关联的 wordpress,备份了数据库 然后用另一个新域名新建站,直接从wordpress官网直接下载的网站压缩包,没有用之前的网站文件夹. 然后把原来的 ...

  3. 并发模型与IO模型梳理

    并发模型 常见的并发模型一般包括3类,基于线程与锁的内存共享模型,actor模型和CSP模型,其中尤以线程与锁的共享内存模型最为常见.由于go语言的兴起,CSP模型也越来越受关注.基于锁的共享内存模型 ...

  4. C# ModBus 读取数据

    简单介绍: 项目上需要与多家公司做接口对接.我们提供接口的有,其他公司提供的接口也有.所有的接口全部对接完了,遇到一个非常棘手的问题,需要获取甲方船厂设备上的状态,就给了一个文档,文档上写了IP.端口 ...

  5. json模块和pickle模块

    json模块和pickle模块 一.json模块 作用:用python写了一个程序,用java写了一门程序,这两个程序需要数据之间交流,就产生了一种多种语言通用的数据类型,json串. 序列化:把对象 ...

  6. 2019Hexo博客Next主题深度美化 打造一个炫酷博客(2)-奥怪的小栈

    219/8/1 更新 本文转载于:奥怪的小栈 这篇文章告诉你在搭建好博客后,面对网上千篇一律的美化教程怎么才能添加自己独特点,使人眼前一亮. 本站基于HEXO+Github搭建. 所以你需要准备好HE ...

  7. Java 学习笔记---Java double类型相加问题

    多个double类型的数直接相加的时候,可能存在精度误差.( 由于计算机算法以及硬件环境决定只能识别 0 1.计算机默认的计算结果在都在一个指定精度范围之内,想往深的了解,可以学习数值分析等) 在金融 ...

  8. Mybatis延迟加载的实现以及使用场景

    首先我们先思考一个问题,假设:在一对多中,我们有一个用户,他有100个账户. 问题1:在查询用户的时候,要不要把关联的账户查出来? 问题2:在查询账户的时候,要不要把关联的用户查出来? 解答:在查询用 ...

  9. Redis的初识

    简介 已经有了Membercache和各种数据库,Redis为什么会产生?Redis纯粹为应用而产生,它是一个高性能的key-value数据库.Redis的出现,很大程序补偿了Memcached这类k ...

  10. 【selenium】- 自动化测试必备工具FireBug&FirePath

    本文由小编根据慕课网视频亲自整理,转载请注明出处和作者. 1. FireBug FireBug的安装: 如果使用Firefox浏览器的话,推荐使用较低版本,比如27-32.否则会报错. 点击右上角的菜 ...