前端 页面加载完成事件 - 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] 按钮单击事件的五种写法
在平时学习安卓的过程中,不论是看视频还是看博客,我发现每个人对代码的写法都有不同的偏好,比较明显的就是对控件响应事件的写法的不同.所以我想把这些写法总结一下,比较下各种写法的优劣,希望可以让自己可以灵 ...
随机推荐
- 解决php - Laravel rules preg_match(): No ending delimiter '/' found 问题
### 说明解决php - Laravel preg_match(): No ending delimiter '/' found 一.遇到问题的原因本正常添加如下 public function r ...
- Xshell登陆服务器及Linux的简单命令
在之前的推文中,我已经给出了怎样利用Git登陆服务器”你在用xshell,putty登陆?推荐一个小工具(Git)登陆“其中包括xshell登陆服务器.今天讲讲常见的Linux命令,这个和之前将的利用 ...
- 使用Sigar做后台服务器管理时，遇到的linux上的问题
首先是线下猛如虎,线上惨不忍赌........ 问题的出处是: function change() { /*获取cpu*/ $.ajax({ url: "http://localhost:8 ...
- 驰骋工作流引擎与jFinal集成版本2.0
驰骋工作流引擎与jFinal集成版本2.0 发布说明 关键字: 驰骋工作流程快速开发平台 工作流程管理系统java工作流引擎. 使用协议:GPL. 关于JFinal: https://www.jfin ...
- Shell总结1
1.错误输入重定向,将状态输入到d.txt 2.cut取列 free -m|grep “^Mem”|cut -d “ ” -f19 找内存 3. 4.cat看文件显示行号 5.查看文件空白行的行号 ...
- 为了完成这个功能，我竟然用5行代码制作了一个EXE可执行程序
由于用户访问我们某个网址的路径比较长,最后我们确定了在桌面添加快捷入口的方案,让用户点击快捷入口直接进入直接的网址,而且这个快捷入口要带有指定的logo(排除了新建url快捷方式的方案),所以我决定写 ...
- 面试中常用的六种排序算法及其Java实现
常见排序算法的时间复杂度以及稳定性: 1 public class Sort { public static void main(String[] args){ int[] nums=new int[ ...
- nginx安装错误：c compiler cc is not found
今天安装软件nginx的时候遇到的报错:c compiler cc is not found 查了下网上的资料,解决方案也不复杂. 先说明下环境: 服务器:CentOS 7 nginx:2.3.1 原 ...
- CF 551 D.Serval and Rooted Tree 树形DP
传送门:http://codeforces.com/contest/1153/problem/D 思路: 这道题想了一天,突发奇想,就是维护每个点两个值,第几大和第几小,就可以有传递性了. #incl ...
- HDU 4280 Island Transport（无向图最大流）
HDU 4280:http://acm.hdu.edu.cn/showproblem.php?pid=4280 题意: 比较裸的最大流题目,就是这是个无向图,并且比较卡时间. 思路: 是这样的,由于是 ...