js中页面加载完成后执行的几种方法及执行顺序
在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中页面加载完成后执行的几种方法及执行顺序的更多相关文章
- js中页面加载完成后执行的几种方式及执行顺序
1:使用jQuery的$(function){}; 2:使用jquery的$(document).ready(function(){});前两者本质上没有区别,第1种是第2种的简写方式.两个是docu ...
- Javascript中页面加载完成后优先执行顺序
Javascript中页面加载完成后优先执行顺序 document优先于windowwindow优先于element //document加载完成执行方法体 document.addEventList ...
- 关于 第三方接口支付的时候 采用post提交的方式,有两种 一种是通过 curl来进行,一种是通过js当页面加载完后跳转
这是第一种.通过javascript页面加载完后,对表单采用 post方式提交给 第三方接口----- echo <<<_END<!DOCTYPE html PUBLIC &q ...
- js实现 页面加载 完成 后顺序 执行
function addLoadEvent(func){ var oldonLoad = window.onload; if(typeof window.onload != 'function'){ ...
- js页面加载完后执行(document.onreadystatechange 和 document.readyState)
js页面加载完后执行javascript(document.onreadystatechange 和 document.readyState) document.onreadystatechange ...
- 页面加载完毕后调用js方法进行布局操控 已实验
页面加载完毕后调用js方法进行布局操控 已实验 $(function(){ var check1 = $("[id$=SMS]").is(':checked'); var bl=$ ...
- 转:JS线程和JS阻塞页面加载的问题
前几日写了一篇文章,介绍了js阻塞页面加载的问题.当时是通过例子来验证的.今天,我介绍一下浏览器内核,从原理上介绍一下js阻塞页面加载的原因. 浏览器的内核是多线程的,它们在内核制控下相互配合以保持同 ...
- js判断页面加载完毕方法
判断页面加载完成这个方法是很常见的,下面有三个常用的方法,各有利弊. 一.纯js方法 // (1).页面所有内容加载完成执行 window.onload = function(){ } // (2). ...
- 页面加载完成后,触发事件——trigger()
<button id="btn">点击我</button> <div id="test"></div> 如果页面 ...
随机推荐
- 2020-03-26:eureka 和其他注册中心比如zk有什么不同?
从eureka工作原理可以看出,eureka client有缓存功能,即使eureka所有的serve都宕掉,仍然能给服务消费者发送服务信息,所以eureka保证了服务可用性,不能保证数据一致性,是一 ...
- NodeJs nrm 和 nvm
nrm 和 nvm nrm (npm registry manager)是npm的镜像源管理工具 nvm (node version manager)是nodejs的版本管理工具 nrm # nrm ...
- 01第一个批处理文件 window开机自动加载批处理文件
1 批处理文件用来加载python程序 批处理的文件名称为:Hello.bat @echo off C: cd C:\Users\\Desktop\python\HelloWorld\HelloWo ...
- go微服务系列(四) - gRPC入门
1. 前言 2. gRPC与Protobuf简介 3. 安装 4. 中间文件演示 4.1 编写中间文件 4.2 运行protoc命令编译成go中间文件 5. 创建gRPC服务端 5.1 新建Produ ...
- 调试备忘录-RS485 MODBUS RTU协议简述
目录--点击可快速直达 目录 写在前面 先简单说下什么是MODBUS? 参考文章 写在前面 最近在做和物联网有关的小项目,有一个传感器通讯用到了RS485 MODBUS RTU协议,所以就写个随笔记录 ...
- day1 linux常用命令(一)
- 手把手mc开服教学(内置开服核心)
QQ交流群:1125669835 mc开服教程 首先我们需要下载一个开服核心,然后把服务器核心放在一个空文件夹里(这是我的开服核心) 然后再打开(感jio这是废话,要耐心等待......) 然后你会发 ...
- 秒杀 2Sum 3Sum 4Sum 算法题
2 Sum 这题是 Leetcode 的第一题,相信大部分小伙伴都听过的吧. 作为一道标着 Easy 难度的题,它真的这么简单吗? 我在之前的刷题视频里说过,大家刷题一定要吃透一类题,为什么有的人题目 ...
- React 17 要来了,非常特别的一版
写在前面 React 最近发布了v17.0.0-rc.0,距上一个大版本v16.0(发布于 2017/9/27)已经过去近 3 年了 与新特性云集的 React 16及先前的大版本相比,React 1 ...
- Linux 查网关和dns命令
一,查看网关(缺省路由)方法: 1.route -n 或netstat -rn2.ip route show 二, 查看DNS: nslookup www.baidu.com