在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. 带图标和多行显示的ListBox

    源码https://www.codeproject.com/Articles/15464/Extending-the-ListBox-to-show-more-complex-items 定义控件 u ...

  2. Javascript十大排序算法的实现方法

    上一篇中,实现了Javascript中的冒泡排序方法,下面把剩余的九种排序算法实现 选择排序: var array = []; for(var i=0;i<100000;i++){ var x ...

  3. Reactive 漫谈

    目录 概念 面向流设计 异步化 响应式宣言 参考文档 概念 Reactive Programming(响应式编程)已经不是一个新东西了. 关于 Reactive 其实是一个泛化的概念,由于很抽象,一些 ...

  4. 【数据结构】8.java源码关于HashMap

    1.hashmap的底层数据结构 众所皆知map的底层结构是类似邻接表的结构,但是进入1.8之后,链表模式再一定情况下又会转换为红黑树在JDK8中,当链表长度达到8,并且hash桶容量超过64(MIN ...

  5. Docker跨服务器通信Overlay解决方案(上) Consul单实例

    场景 公司微服务快上线了,微服务都是用Docker容器进行部署的,在同一台主机下,把服务都部署上,注册到Nacos的IP与PORT都是内网的IP与Dockerfile中定义的端口号,看起来好像也没什么 ...

  6. FileUtils工具类的使用

    import org.apache.commons.io.FileUtils; import org.apache.commons.io.filefilter.DirectoryFileFilter; ...

  7. jQuery Validate 可选项

  8. Python面试总结篇

    Python Coding Interview Questions and Answers 面试题一:逻辑运算赋值 v1 = 1 or 9 v2 = 0 or 9 # print(v1, v2)会输出 ...

  9. 关于line-height 行高的一些理解和技巧

    大家都知道,如何设置文字垂直居中,也就是:设置line-height 和 外围盒子的高度height一致: 其实这里有个地方,是多余的,也就是height,设不设置都居中: 那么,行高是生产高度的? ...

  10. mybatis 源码分析（六）StatementHandler 主体结构分析

    分析到这里的时候,mybatis 初始化.接口.事务.缓存等主要功能都已经讲完了,现在就还剩下 StatementHandler 这个真正干活的家伙没有分析了:所以接下来的博客内容主要和数据库的关系比 ...