js之onload事件的一点使用心得


Posted in Javascript onAugust 14, 2013

如果我问你window.load和window.onload分别是什么意思,恐怕你会回答我:“这不是页面加载完就执行吗”。
但是答案是不一定,得看你怎么用。看一下例子吧
例1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<title>Untitled</title> 
<script type="text/javascript"> 
function ShowMessage() 
{ 
alert("true"); 
} 
window.onload=ShowMessage(); 
</script> 
</head> 
<body> 
当你看到true时看不到我 
</body> 
</html>

当你看到true的弹出框的时候,你肯定没有看到“当你看到true时看不到我”,说明页面还没有载入完就已经开始执行js了。
例2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<title>Untitled</title> 
<script type="text/javascript"> 
function ShowMessage() 
{ 
alert("true"); 
} 
window.onload=function(){ShowMessage();} 
</script> 
</head> 
<body> 
你看到true时就看到我了 
</body> 
</html>

当你看到true的弹出框的时候,你也会看到“你看到true时就看到我了”,这个才是真正的页面载入完才触发。
PS:推荐像onload事件之类的使用匿名函数执行,即window.onload=function(){ShowMessage();}这种形式。
Javascript 相关文章推荐
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
javascript html5实现表单验证
Mar 01 Javascript
JQuery解析XML的方法小结
Apr 02 Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
django使用channels2.x实现实时通讯
Nov 28 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 Javascript
jQuery Animation实现CSS3动画示例介绍
Aug 14 #Javascript
JavaScript中json使用自己总结
Aug 13 #Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 #Javascript
Jquery动态进行图片缩略的原理及实现
Aug 13 #Javascript
javascript中RegExp保留小数点后几位数的方法分享
Aug 13 #Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 #Javascript
jquery二级导航内容均分的原理及实现
Aug 13 #Javascript
You might like
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
2016/05/12 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
2018/09/30 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
Tesserocr库的正确安装方式
2018/10/19 Python
详解python读取和输出到txt
2019/03/29 Python
django基于restframework的CBV封装详解
2019/08/08 Python
Python语言异常处理测试过程解析
2020/01/08 Python
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
优秀管理者获奖感言
2014/02/17 职场文书
2014年清明节寄语
2014/04/03 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书
化工生产实习心得体会
2016/01/22 职场文书