前端 页面加载完成事件 - onload，五种写法
在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，五种写法的更多相关文章
- jq常用事件（on,blur,focus,change）,js/jq等待图片(页面)加载完毕事件,js读取文件
jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...
- js页面加载完成事件
jquery的一种简写形式: $(function(){ alert("页面加载完成!"); }); 其对应的完整形态为: $(document).ready(function( ...
- jQuery页面加载完毕事件及jQuery与JavaScript的比较
1.jQuery概述 jQuery是一个JavaScript库,它集成了JavaScript.DOM.CSS和Ajax,简化了JavaScript编程,提倡write less, do more. 2 ...
- fakeLoader页面加载前loading演示8种效果
提高用户体验的插件fakeLoader页面加载前loading演示8种效果 在线预览 下载地址 示例代码 <div id="main"> <div class=& ...
- JS 页面加载触发事件 document.ready和window.onload的区别
document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ...
- JS 页面加载触发事件 document.ready和onload的区别（转）
原博地址:http://blog.163.com/zhaoyanping_1125/blog/static/20132915320111129113723710/ * document.ready和o ...
- JS 页面加载触发事件 document.ready和onload的区别
document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ...
- 页面加载之window.onload=function(){} 和 $(function(){})的区别
通用的页面加载js有四种方式: 1.window.onload = function(){}; —-js 2.$(window).load(function(){});——Jquery 3.$(doc ...
- [Android] 按钮单击事件的五种写法
在平时学习安卓的过程中,不论是看视频还是看博客,我发现每个人对代码的写法都有不同的偏好,比较明显的就是对控件响应事件的写法的不同.所以我想把这些写法总结一下,比较下各种写法的优劣,希望可以让自己可以灵 ...
随机推荐
- Eureka 缓存结构以及服务感知优化
目录 Eureka-Client获取注册信息 Eureka-Server管理注册信息 服务感知优化 果然好记性不如烂笔头,再简单的东西不记录下来总是会忘的! 本文首先会分析eureka中的缓存架构.并 ...
- str类型转json,str类型转list
python str类型与json格式转换或者list格式转换 str转list: import ast #####方法一##### datas = '{"carname":&qu ...
- Python之基本数据类型概览
Python之基本数据类型概览 什么是数据类型? 每一门编程语言都有自己的数据类型,例如最常见的数字1,2,3.....,字符串'小明','age','&D8'...,这些都是数据类型中的某一 ...
- python 11 迭代器
目录 1. 第一类对象的特点 2. 格式化 3.迭代器 3.1 可迭代对象 3.2 迭代器 4. 递归 1. 第一类对象的特点 #1. 函数名可以当作值被赋值给变量 def func(): print ...
- Linux中mysql5.7主从配置
MySQL主从配置(两台Linux之间) 简介 Linux下MySQL数据库的主从同步用来实现读写分离.主数据库进行数据的插入,删除与更新:从数据库专门用来查询操作,缓解数据库的压力.让运行海量数据的 ...
- CF989B A Tide of Riverscape 思维 第七题
A Tide of Riverscape time limit per test 1 second memory limit per test 256 megabytes input standard ...
- codeforces #583 problem D(搜索好题)
题目大意:在一个已经有障碍的地图上,设置尽可能少的障碍使得(1,1)无法到达(n,m),行进路线位向下或向右. 数据范围:n*m<=1e6 解题思路:答案一定是小于等于2的,因为可以直接阻碍(1 ...
- Go组件学习——手写连接池并没有那么简单
1.背景 前段时间在看gorm,发现gorm是复用database/sql的连接池. 于是翻了下database/sql的数据库连接池的代码实现,看完代码,好像也不是很复杂,但是总觉得理解不够深刻,于 ...
- shell 菜单选择命令
devices=`adb devices | sed '1d;$d' | sed 's/device//g'` */sed '1d;$d' : 删除第一行和最后一行*/ device_ ...
- SpringBoot 参数校验的方法
Introduction 有参数传递的地方都少不了参数校验.在web开发中,前端的参数校验是为了用户体验,后端的参数校验是为了安全.试想一下,如果在controller层中没有经过任何校验的参数通过s ...