在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. JS实现循环删除数组中元素的方法介绍

    这篇文章主要给大家介绍了关于Javascript循环删除数组中元素的几种方法,文中给出了详细的示例代码供大家参考学习,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧. 本文主要跟大家分享了 ...

  2. IDEA部署 java Web项目 常见配置

    前言 从eclipse上转到idea上,第一次使用idea部署web项目,真折磨人,写了一个 helloworld 5分钟,了解idea部署web项目5小时. 我使用的是idea 2019.1版本,其 ...

  3. C#_HttpWebRequest保存cookies模拟登录的方法

    CookieContainer cookies = new CookieContainer(); string url = "http://www.google.com.hk/"; ...

  4. 使用Python的Django和layim实现即时通讯

    看到Django和layim实现websocketde资料很少,自己就琢磨了下,顺便搭建出来了.自己要去找闲心大神授权呀. 先来看图  这是初次搭建的,今天一天就搞定.我自己接入了图灵机器人. Pyt ...

  5. function template

    /* function template programmer:qpz */ #include <iostream> using namespace std; template <c ...

  6. React Native的APP打包教程

    1.改软件的名称 2.改软件的图标 3.给做好的项目打成APP包 改软件的名称 找到项目的改名的位置 然后用记事本打开strings.xml,然后改自己想要的名字 改软件的图标 找到如下5个文件,然后 ...

  7. Windows10下载mysql详解

    mysql版本分为企业版(Enterprise)和社区版(Community),其中社区办是通过GPL协议授权的开源软件,可以免费使用,而企业版是需要收费的商业软件. mysql官网 https:// ...

  8. HBase的安装和使用

    文章作者:foochane  原文链接:https://foochane.cn/article/2019062801.html 1 Hbase基本介绍 Hbase是一个分布式数据库,可以提供数据的实时 ...

  9. Scala 系列（十二）—— 类型参数

    一.泛型 Scala 支持类型参数化,使得我们能够编写泛型程序. 1.1 泛型类 Java 中使用 <> 符号来包含定义的类型参数,Scala 则使用 []. class Pair[T, ...

  10. Spring依赖注入浅析

    1. 概念理解 依赖注入 谁注入谁? 依赖对象注入IoC容器. 控制反转 谁控制谁?控制什么? IoC容器控制对象,控制依赖对象的创建与注入. 为什么称为反转?创建.注入对象的控制权由程序员的主观意愿 ...