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创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
JSON对象转化为字符串详解
Aug 11 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 Javascript
jQuery冲突问题解决方法
Jan 19 jQuery
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
图书管理程序(三)
2006/10/09 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
php格式化日期实例分析
2014/11/12 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
Laravel validate error处理,ajax,json示例
2019/10/25 PHP
js实现单一html页面两套css切换代码
2013/04/11 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
学生学习总结的自我评价
2013/10/22 职场文书
银行实习生的自我评价
2013/12/09 职场文书
追悼会主持词
2014/03/20 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
教师反邪教心得体会
2016/01/15 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL
Django路由层如何获取正确的url
2021/07/15 Python