一、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 之 页面加载事件的更多相关文章

  1. 从零开始学 Web 之 jQuery（一）jQuery的概念，页面加载事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. Javascript中页面加载完成后优先执行顺序

    Javascript中页面加载完成后优先执行顺序 document优先于windowwindow优先于element //document加载完成执行方法体 document.addEventList ...

  3. webdriver定位页面元素时使用set_page_load_time()和JavaScript停止页面加载

    webdriver定位页面元素时使用set_page_load_time()和JavaScript停止页面加载 原文:https://my.oschina.net/u/2344787/blog/400 ...

  4. Javascript在页面加载时的执行顺序【转】

    一.在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对<script>和</script>之间 由<script />标记的src属 ...

  5. jQuery 页面加载事件

    页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成.(可以说:ready 在onload ...

  6. javascript的页面加载及性能优化(兼容IE7)

    通常来说,window.onload就够用了,如果想加载多个事件,我们可以采取以下方式: window.onload = function(){        func1();        func ...

  7. ionic 页面加载事件及loading动画

    页面加载完成事件(非刷新情况下,页面切换是不会重复触发此事件的,只在第一次进入页面时触发,需要重复触发的话请使用 $ionicView.enter 事件) angular.module('app.co ...

  8. javascript 实现页面加载完再显示页面

    document.onreadystatechange = function () { if (document.readyState == "complete") { docum ...

  9. JavaScript Html页面加载完成

    //一.Html页面加载完成的JS写法 //1. $(function () {     alert("窗体Html页面加载完成方法一"); }); //2. $(document ...

随机推荐

  1. Kafka数据安全性、运行原理、存储

    直接贴面试题: 怎么保证数据 kafka 里的数据安全? 答: 生产者数据的不丢失kafka 的 ack 机制: 在 kafka 发送数据的时候,每次发送消息都会有一个确认反馈机制,确保消息正常的能够 ...

  2. mapreduce 读写Parquet格式数据 Demo

    import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs ...

  3. quick: iskindof使用注意

    quick: iskindof使用注意 --[[-- 如果对象是指定类或其子类的实例,返回 true,否则返回 false ~~~ lua local Animal = class("Ani ...

  4. UDF——监测指定点的物理量

    Fluent版本:2019 R1 Visual Studio版本:Visual Studio 2013 其他版本应该也是适用的 算例来源于:https://confluence.cornell.edu ...

  5. pytest学习笔记二 fixtrue

    前言 官方文档关于fixture功能的解释如下: The purpose of test fixtures is to provide a fixed baseline upon which test ...

  6. Docker 版rocketmq部署

    rocketmq 部署启动指南-Docker 版   最近学习使用 rocketmq,需要搭建 rocketmq 服务端,本文主要记录 rocketmq 搭建过程以及这个过程踩到的一些坑. 准备工作# ...

  7. storm并行

    Storm并行度 wordcount 统计job代码 public class WordCountTopology { private static final String SENTENCE_SPO ...

  8. VueTreeselect出现unknown解决方法

    VueTreeselect 控件显示[unknown]如图: treeselect 绑定的值需要与options输出的id相对应,若是空值,请不要给空字符串,0,等,因为会出现unknown,并且当选 ...

  9. Java开发笔记（一百四十五）FXML布局的伸展适配

    前面介绍了FXML的基本格式及其控制器的用法,算是打通了FXML方式的编码流程.程序界面通常保持固定尺寸,不过有时也允许用户拖曳窗口大小,不拖不打紧,一拖就可能坏事.像之前的登录窗口,没拖的时候界面如 ...

  10. 整理：WPF用于绑定命令和触发路由事件的自定义控件写法

    原文:整理:WPF用于绑定命令和触发路由事件的自定义控件写法 目的:自定义一个控件,当点击按钮是触发到ViewModel(业务逻辑部分)和Xaml路由事件(页面逻辑部分) 自定义控件增加IComman ...