JavaScript 之 页面加载事件
一、onload 加载事件
onload 是 window 对象的一个事件,也可以省略 window 直接使用。
常用方式:
<head>
<script>
windown.onload = function() {
// 方法体
}
</script>
<head>
这个事件是等待页面加载完成之后,再执行 <script> 标签的内容。即页面上所有的元素创建完毕,并且引用的外部资源下载完毕(js,css,图片)
注意:该事件相比于在 <body> 中的 <script> 标签中的内容执行速度慢,因为 onload 需要等页面加载完毕才执行,而其他的当页面上的元素创建完毕后就会执行。
onload 不仅仅可以应用于 window,也可以用于其他的一些标签。
二、onunload 卸载事件
onunload 是卸载事件,当页面卸载的时候执行。
Demo:
1 onunload = function () {
2 alert('欢迎下次再来'); // 报错: Blocked alert('欢迎下次再来') during unload.
3 console.log('bye bye');
4 }
当我们按 F5重新加载页面会发现 alert 对话框会报错,并不会执行,这是因为 onunload 事件中所有的对话框都无法使用,window 对象被冻结了。
JavaScript 之 页面加载事件的更多相关文章
- 从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Javascript中页面加载完成后优先执行顺序
Javascript中页面加载完成后优先执行顺序 document优先于windowwindow优先于element //document加载完成执行方法体 document.addEventList ...
- webdriver定位页面元素时使用set_page_load_time()和JavaScript停止页面加载
webdriver定位页面元素时使用set_page_load_time()和JavaScript停止页面加载 原文:https://my.oschina.net/u/2344787/blog/400 ...
- Javascript在页面加载时的执行顺序【转】
一.在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对<script>和</script>之间 由<script />标记的src属 ...
- jQuery 页面加载事件
页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成.(可以说:ready 在onload ...
- javascript的页面加载及性能优化(兼容IE7)
通常来说,window.onload就够用了,如果想加载多个事件,我们可以采取以下方式: window.onload = function(){ func1(); func ...
- ionic 页面加载事件及loading动画
页面加载完成事件(非刷新情况下,页面切换是不会重复触发此事件的,只在第一次进入页面时触发,需要重复触发的话请使用 $ionicView.enter 事件) angular.module('app.co ...
- javascript 实现页面加载完再显示页面
document.onreadystatechange = function () { if (document.readyState == "complete") { docum ...
- JavaScript Html页面加载完成
//一.Html页面加载完成的JS写法 //1. $(function () { alert("窗体Html页面加载完成方法一"); }); //2. $(document ...
随机推荐
- amp加载速度比标准移动页面快85%
6月13日,谷歌合作伙伴大会上Oliver Vidinovski先生(Google Global Head of eCommerce - CS/GCS) 释放了一个信息:amp加载速度比标准移动页面快 ...
- Java的静态变量初始化的坑
在网上看到一个很有意思的题目,题目如下 class SingleTon { private static SingleTon singleTon = new SingleTon(); public s ...
- Layui 必填验证
lay-verify="required"
- GEO2R
GEO2R 是GEO数据库官方提供的一个工具,用于进行差异表达分析. 该工具实现的功能就是将GEO数据库中的数据导入到R语言中,然后进行差异分析,本质是通过以下两个bioconductor上的R包实现 ...
- Spring Boot进阶系列二
上一篇文章,主要分析了怎么建立一个Restful web service,系列二主要创建一个H5静态页面使用ajax请求数据,功能主要有添加一本书,请求所有书并且按照Id降序排列,以及查看,删除一本书 ...
- Linux查看端口使用情况
1.netstat -tunlp,查看已使用的端口 2.netstat -tunlp | grep 8080,查询指定端口使用情况 3.netstat命令无法使用需要安装net-tools yum i ...
- cad.net cad宋体问号 删除 KT_ST.ttf
我的两台电脑是win10的,(可能这个问题也存在在xp.win7.win8.......毕竟十年前我就遇到过了.......) 一台电脑的cad字体设置为"宋体",另一台电脑打开之 ...
- Python【每日一问】30
问: [基础题]:一个足球队在寻找年龄在10岁到12岁的小女孩(包括10岁和12岁)加入.编写一个程序,询问用户的性别(m表示男性,f表示女性)和年龄,然后显示一条消息指出这个人是否可以加入球队,询问 ...
- linux 手动源码安装lnmp(亲测)
linux 手动源码安装lnmp笔记(亲测)<pre>先安装这2个yum install gccyum install g++</pre><pre>先在linux ...
- dp + 预处理前缀和 - HNU 13248 Equator
Equator Problem's Link: http://acm.hnu.cn/online/?action=problem&type=show&id=13248&cour ...