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 相关文章推荐
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
js实现无缝滚动特效
Dec 20 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 Javascript
详解js静态检查工具eslint配置文件
Nov 23 Javascript
layer提示框添加多个按钮选择的实例
Sep 12 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
windows中为php安装mongodb与memcache
2015/01/06 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
利用js 进行输入框自动匹配字符的小例子
2013/06/29 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
简单介绍Python中的JSON使用
2015/04/28 Python
Django入门使用示例
2017/12/12 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
分享8款纯CSS3实现的搜索框功能
2017/09/14 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
出生证明公证书
2014/04/09 职场文书
债务纠纷委托书
2014/08/30 职场文书
党的群众路线对照检查材料(个人)
2014/09/24 职场文书
党员民主评议总结
2014/10/20 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python