JavaScript页面加载事件实例讲解
一、onload 加载事件
onload 是 window 对象的一个事件,也可以省略 window 直接使用。
常用方式:
<head><script> windown.onload = function() { // 方法体 } </script><head>
这个事件是等待页面加载完成之后,再执行 <script> 标签的内容。即页面上所有的元素创建完毕,并且引用的外部资源下载完毕(js,css,图片)
注意:该事件相比于在 <body> 中的 <script> 标签中的内容执行速度慢,因为 onload 需要等页面加载完毕才执行,而其他的当页面上的元素创建完毕后就会执行。
onload 不仅仅可以应用于 window,也可以用于其他的一些标签。
二、onunload 卸载事件
onunload 是卸载事件,当页面卸载的时候执行。
Demo:
onunload = function () { alert('欢迎下次再来'); // 报错: Blocked alert('欢迎下次再来') during unload. console.log('bye bye'); }
当我们按 F5重新加载页面会发现 alert 对话框会报错,并不会执行,这是因为 onunload 事件中所有的对话框都无法使用,window 对象被冻结了。
上面的知识点很简单,希望能够给大家提供到帮助同时感谢大家对我们的支持。+
相关推荐
-
基于javascript实现页面加载loading效果
本文实为大家分享了javascript实现页面加载loading效果,供大家参考,具体内容如下 效果图: <html> <head> <title>正在载入</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body bgcolor="#FFFFFF"
-
JavaScript判断页面加载完之后再执行预定函数的技巧
JavaScript 脚本语言的执行,是需要触发的.一般的做法就是在网页中,直接编写几个函数,有的在代码被加载的时候就被浏览器处理,或者使用类似下面的代码来触发实现函数的相关功能. <div id="link" onclick="fun()" ></div> 上面代码的意思就是,当鼠标点击 id 为 link 的元素的时候,就触发了它的 onclick 事件,然后执行使用 JavaScript 定义的 fun 函数.这样的做法肯定是很不合理的
-
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
本文实例讲述了js实现的页面加载完毕之前loading提示效果.分享给大家供大家参考,具体如下: 一.JS代码: //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离(loading框的宽度为215px,高度为61px) var _LoadingTop =
-
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
本文实例讲述了JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支.分享给大家供大家参考,具体如下: 页面加载事件的比较 window.onload jquery 中的 document.ready document.ready = function (callback) { // 兼容FF,Google if (document.addEventListener) { document.addEventListener('DOMContentLoaded', function
-
JavaScript页面加载事件实例讲解
一.onload 加载事件 onload 是 window 对象的一个事件,也可以省略 window 直接使用. 常用方式: <head><script> windown.onload = function() { // 方法体 } </script><head> 这个事件是等待页面加载完成之后,再执行 <script> 标签的内容.即页面上所有的元素创建完毕,并且引用的外部资源下载完毕(js,css,图片) 注意:该事件相比于在 <bod
-
javascript页面加载完执行事件代码
复制代码 代码如下: <script type="text/javascript" language="JavaScript"> //: 判断网页是否加载完成 document.onreadystatechange = function () { if(document.readyState=="complete") {
-
jquery zTree异步加载简单实例讲解
本文实例讲解了jquery zTree异步加载,分享给大家供大家参考,具体内容如下 web.xml中Servlet配置如下: <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XM
-
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
ajax请求异步队列加载 我们在开发程序的时候通常会碰到使用ajax加载数据显示到列表的情况.ajax默认使用异步加载(async:true).为什么不使用同步呢,因为ajax同步加载会UI渲染线程阻塞的问题.通常表现为在加载大量数据时由于加载时间过长导致页面不能点击.gif动画卡死以及浏览器崩溃等问题.所以,一般情况下,尽量使用ajax异步加载. 可是,我们有些时候的需求要求ajax同步加载,一个加载完再加载下一个,即所谓的队列.前面我们有说过,同步加载会引起UI渲染阻塞问题.那么我们要怎么实
-
jQuery移动web开发中的页面初始化与加载事件
页面初始化事件(pagebeforecreate.pagecreate) Jquery Mobile会自动基于page"内的增强的约定自动初始化一些插件.例如:给一个input输入框约定了type=range属性会自动生成一个自定义滑动条.这些自动初始化的行为是受"page"插件控制的,它在执行前后部署部署事件,允许你在初始化前后操作页面,或者甚至自己提供初始化行为,禁止自动初始化.注以下的页面初始化事件在每个"page"只被触发一次,与每次页面在显示或者
-
javaScript 页面自动加载事件详解
方法1: 复制代码 代码如下: Window.onload=function(){ Var name=document.getElementById("name").val();//加载HTML,并且加载外部所有所有的引用文件(图片,css样式,js等)} 方法2:需要引入Jquery的 .js文件 复制代码 代码如下: $(document).ready(function(){ alert("JQuery的第一个入门案例");//加载HTML,
-
Javascript代码在页面加载时的执行顺序介绍
一.在HTML中嵌入Javasript的方法1.直接在Javascript代码放在标记对<script>和</script>之间2.由<script />标记的src属性制定外部的js文件3.放在事件处理程序中,比如:<p onclick="alert('我是由onclick事件执行的Javascript')">点击我</p>4.作为URL的主体,这个URL使用特殊的Javascript:协议,比如:<a href=&q
-
JavaScript与Image加载事件(onload)、加载状态(complete)
昨天用jQuery插件aeImageResize,发现它更有优势:每张图片加载完后,会马上进行等比缩放. 这归于图片对象Image的加载事件onload的功劳. 查看插件的源码,发现它也依赖图片对象的complete属性和onload事件,并且特别把IE6区分对待,到底IE6在图片加载对象上,与其它浏览器有什么不同呢? 看下文: 通过js操纵DOM很多情况下都是为了实现和当前页html元素的异步载入,我谈谈对Image对象的一些认识. 看个例子: 复制代码 代码如下: <input type=&qu
随机推荐
- javascript学习之闭包分析
- IIS 7.5 限制连接数与流量限制模块的下载安装方法
- iOS在固定的label上动态显示所有文字
- javascript实现的简单计时器
- 十幅图告诉你什么是PHP引用
- js创建子窗口并且回传值示例代码
- 纯CSS实现上下左右都居中的代码
- 5分钟理解JavaScript中this用法分享
- 自写一个模仿Dictionary与Foreach的实现及心得总结
- Joomla实现组件中弹出一个模式(modal)窗口的方法
- 一次性压缩Sqlserver2005中所有库日志的存储过程
- Linux系统下常见基本问题的解决方法
- Android中ListView用法实例分析
- Android Studio 报Integer types not allowed错误
- C#特性 扩展方法
- C#实现附件上传和下载功能
- Android实现中国象棋附源码下载
- 详解IOS中Tool Bar切换视图方法
- 详解log4net的使用
- js实现继承的方法及优缺点总结