一、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. vue-cli3和ts建立vue项目

    第一步,如果你之前没有装vuecli,可以直接执行下面命令 npm install --global @vue/cli 注:这里我install 的时候不成,于是我用的是 cnpm install - ...

  2. GO 解决使用bee工具，报 bash: bee: command not found

    我最近使用beego时,遇到以下问题:command not found使用vscode时,运行bee run,报以下错 我查到一篇文章csdn,说用拷贝bee.exe方法,我觉得纯扯淡 如何解决? ...

  3. vue+ typescript 使用parcel 构建

    parcel 是一个零配置的前端构建工具,相比webpack 更快,同时使用简单以下是 一个简单的使用typescript 开发vue 应用,同时使用parcel 构建,同时集成了docker 构建, ...

  4. [PHP] Laravel使用redis保存SESSION

    Laravel使用redis保存SESSION 首先确认服务器已经安装redis服务,php安装了redis扩展. 1.打开config/database.php.在redis配置项中增加sessio ...

  5. curl用法详解

    前言 昨天现场的浏览器崩溃了,楼主苦逼,就临时用了curl测试了下图片请求接口.今天总结下. 一.what? curl is a tool to transfer data from or to a ...

  6. linux 自动化安装系统 -KS文件

    # Kickstart file automatically generated by anaconda. installharddrive --partition=sdb2 --dir=lang e ...

  7. Leetcode 219. 存在重复元素 II

    说明: 首先,这是一道Easy题,我天!但是题意理解还是很多坑~ 题目描述: 给定一个整数数组和一个整数 k,判断数组中是否存在两个不同的索引 i 和 j,使得 nums [i] = nums [j] ...

  8. python3.5-ssh免输入密码过程

    ssh远程批量执行命令要输密码很蛋疼,虽然有很多种方式,大概有4.5种.原理基本类似. 这里我就讲一个python的模拟登陆 模块 此刻的时间是:2015年11月19日11:11:47         ...

  9. 【C/C++开发】C++11 并发指南二(std::thread 详解)

    上一篇博客<C++11 并发指南一(C++11 多线程初探)>中只是提到了 std::thread 的基本用法,并给出了一个最简单的例子,本文将稍微详细地介绍 std::thread 的用 ...

  10. Debug 路漫漫-08：Keras 版本升级函数变换导致的问题

    在使用 CNN的时候,报错: TypeError: ('Keyword argument not understood:', 'padding') 将“padding”改为“border_mode”, ...