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 相关文章推荐
json 定义
Jun 10 Javascript
写出更好的JavaScript程序之undefined篇(中)
Nov 23 Javascript
js中prototype用法详细介绍
Nov 14 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
Vue render深入开发讲解
Apr 13 Javascript
vue+moment实现倒计时效果
Aug 26 Javascript
vue使用原生swiper代码实例
Feb 05 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 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
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
原生JS实现幻灯片
2017/02/22 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
python爬取淘宝商品详情页数据
2018/02/23 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
Python利用命名空间解析XML文档
2020/08/10 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
工作分析计划书
2014/04/30 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
幸福终点站观后感
2015/06/04 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python