在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. Django记录数据库创建、更新、删除操作开源插件推荐

    github: django-simple-history - 安装 $ pip install django-simple-history - 配置 在Settings中添加 INSTALLED_A ...

  2. Flutter 容器(3) - AnimatedPadding

    AnimatedPadding : 会产生动画效果的padding,在给定时间内缩放到指定padding import 'package:flutter/material.dart'; class A ...

  3. YAML简要入门

    这是一篇简单的YAML入门教程,目的是让你知晓什么YAML,以及YAML的基础语法.方便接下来学习如何使用Golang解析YAML.如果想获得更多YAML的知识,请查看http://yaml.org ...

  4. Redis设计与实现——独立功能的实现

    发布和订阅 频道的订阅和退订 struct redisServer{ //键是被订阅者频道 ,键是一个链表,记录所有订阅这个频道的客户端 dict *publish_channels } 订阅实现: ...

  5. Python 批量保存word

    from docx import Document path = r'D:\pywork\12' # word信息表所在文件夹 w = Document(path + '/' + 'word模板表.d ...

  6. idea配置ssm框架

    详细教程如下:https://blog.csdn.net/GallenZhang/article/details/5193215 https://blog.csdn.net/qq_28008917/a ...

  7. Project ACRN documentation

    Project ACRN documentation https://projectacrn.github.io/latest/index.html Virtio devices high-level ...

  8. BIGI行情-实时行情数据源接口websocket接入方法

    BIGI行情-实时行情数据源接口socket接入方法1.国际期货.国内期货.外汇.贵金属.现货.期权.股指.数字货币和A股实时行情和历史行情2.推送的有:socket,websocket,http接收 ...

  9. 服务器基本配置(ubuntu)

    服务器基本配置(ubuntu) 学习目标: 修改初始服务器名字(ubuntu 16.04 ) 修改初始服务器名字(ubuntu 18.04 ) ubuntu换源 更改默认python版本 安装软件出现 ...

  10. 键盘敲入 A 字母时,操作系统期间发生了什么

    前言 键盘可以说是我们最常使用的输入硬件设备了,但身为程序员的你,你知道「键盘敲入A 字母时,操作系统期间发生了什么吗」? 那要想知道这个发生的过程,我们得先了解了解「操作系统是如何管理多种多样的的输 ...