前端 页面加载完成事件 - 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] 按钮单击事件的五种写法
在平时学习安卓的过程中,不论是看视频还是看博客,我发现每个人对代码的写法都有不同的偏好,比较明显的就是对控件响应事件的写法的不同.所以我想把这些写法总结一下,比较下各种写法的优劣,希望可以让自己可以灵 ...
随机推荐
- 【Isabella Message】 【SPOJ - ISAB】【模拟】【矩阵的旋转】
思路 题目链接 题意:题目中先给了一个N阶矩阵样子的字符,后给了一个mask,然后又给出你应该认识的一些单词,最后是让你输出最终字典序最小的一句话. 思路:根据题目要求模拟即可.这里会用到string ...
- Cause: java.lang.NumberFormatException: For input string: "D"
异常:Cause: java.lang.NumberFormatException: For input string: "D" 问题回显: 原因分析:'D'只有1位,被认为是ch ...
- net core Webapi基础工程搭建（五）——缓存机制
目录 前言 Cache Session Cookie 小结 补充 前言 作为WebApi接口工程,性能效率是必不可少的,每次的访问请求,数据库读取,业务逻辑处理都或多或少耗费时间,偶尔再来个各种花式f ...
- 关于C#中的“？”
目录 1. 可空类型修饰符(T?) 2. 三元(运算符)表达式(?: ) 3. 空合并运算符(??) 4. NULL检查运算符(?.) 关于C#中的"?" shanzm-2019年 ...
- Shrio使用Jwt达到前后端分离
概述 前后端分离之后,因为HTTP本身是无状态的,Session就没法用了.项目采用jwt的方案后,请求的主要流程如下:用户登录成功之后,服务端会创建一个jwt的token(jwt的这个token中记 ...
- reponse.addHeader中文名字乱码
- js加密后台加密解密以及验证码
该文档为转载内容: 加密解密 1 前端js加密概述 2 前后端加密解密 21 引用的js加密库 22 js加密解密 23 Java端加密解密PKCS5Padding与js的Pkcs7一致 验证码 1 ...
- 设计模式（C#）——02抽象工厂模式
推荐阅读: 我的CSDN 我的博客园 QQ群:704621321 在工厂模式中,一个工厂只能创建一种产品,但我们往往希望,一个工厂能创建一系列产品.很明显工厂模式已经不能满足我们的需 ...
- Java内部类使用注意事项
Java内部类使用注意事项: 1. 非静态内部类成员可以访问外部类实例成员 (如注释1),但外部类访问非静态内部类的成员 必须创建非静态内部类对象来访问其成员,如注释2 public class La ...
- hdu 5898 odd-even number(数位dp）
Problem Description For a number,if the length of continuous odd digits is even and the length of co ...