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 性能优化手册 推荐
Feb 23 Javascript
JS判断两个时间大小的示例代码
Jan 28 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
js前端面试题及答案整理(一)
Aug 26 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
Vue.use源码分析
Apr 22 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
vue props对象validator自定义函数实例
Nov 13 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 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
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
使用PHP socke 向指定页面提交数据
2008/07/23 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
php二维码生成
2015/10/19 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
Python中文竖排显示的方法
2015/07/28 Python
python解析yaml文件过程详解
2019/08/30 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
python设置环境变量的作用整理
2020/02/17 Python
Python列表切片常用操作实例解析
2020/03/10 Python
详解python metaclass(元类)
2020/08/13 Python
python简单实现插入排序实例代码
2020/12/16 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
单位成立周年感言
2014/01/26 职场文书
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js