两种方法实现在HTML页面加载完毕后运行某个js


Posted in Javascript onJune 16, 2014

js方法:

<script type="text/javascript"> window.onload=function(){ 
var userName="xiaoming"; 
alert(userName); 
} 
</script>

以下为jQuery方法,需要引用jQuery文件。
<script type="text/javascript"> $(document).ready(function(){ 
var userName="xiaoming"; 
alert(userName); 
}); 
</script>

或者其简写
$(function(){ 
var userName="xiaoming"; 
alert(userName); 
});

当dom加载完就可以执行(比window.onload更早)。在同一个页面里可以多次出现.ready()

PS:两者的主要区别

window.onload:

当一个文档完全下载到浏览器中时,才会触发window.onload事件。这意味着页面上的全部元素对js而言都是可以操作的,也就是说页面上的所有元素加载完毕才会执行。这种情况对编写功能性代码非常有利,因为无需考虑加载的次序。、

$(document).ready{ }:

会在DOM完全就绪并可以使用时调用。虽然这也意味着所有元素对脚本而言都是可以访问的,但是,并不意味着所有关联的文件都已经下载完毕。换句话说,当HMTL下载完成并解析为DOM树之后,代码就会执行。

举一个例子:

假设有一个表现图库的页面,这种页面中可能会包含许多大型图像,我们可以通过jQuery隐藏、显示或以其他方式操作这些图像。如果我们通过onload页面设置界面,那么用户在能够使用这个页面之前,必须要等到每一幅图像都下载完成。更糟糕的是,如果行为稍微添加给哪些具有默认行为的元素(比如链接),那么用户的交互可能会导致意想不到的结果。然而当我们试用$(document).ready(){ }进行设置时,这个界面就会更早地准备好可用的正确行为。

使用$(document).ready(){ }一般来说都要优于试用onload事件处理程序,但必须要明确一点的是,因为支持文件可能还没有家在完成,所以类似图像的高度和宽度这样的属性此时不一定有效。

注:用把js放在页面底部的方法以及运用defer="defer" 的方法都是会出现问题的。最好使用上面的函数!

Javascript 相关文章推荐
FireFox JavaScript全局Event对象
Jun 14 Javascript
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
jQuery 中国省市两级联动选择附图
May 14 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
jQuery图片切换动画特效
Nov 02 Javascript
vue分类筛选filter方法简单实例
Mar 30 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
JS+HTML5 canvas绘制验证码示例
Dec 05 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 #Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
Jun 16 #Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 #Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 #Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 #Javascript
javascript操纵OGNL标签示例代码
Jun 16 #Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 #Javascript
You might like
通过具体程序来理解PHP里面的抽象类
2010/01/28 PHP
php Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
php 缩略图实现函数代码
2011/06/23 PHP
php解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
javascript与CSS复习(三)
2010/06/29 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
2016/02/17 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
微信小程序 弹幕功能简单实例
2017/02/14 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
Python实现的弹球小游戏示例
2017/08/01 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
python实现矩阵打印
2019/03/02 Python
PyQt5组件读取参数的实例
2019/06/25 Python
Python八皇后问题解答过程详解
2019/07/29 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
网络专业学生个人的自我评价
2013/12/16 职场文书
创业女性典型材料
2014/05/02 职场文书
好听的队名和口号
2014/06/09 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
村主任当选感言
2015/08/01 职场文书
学校隐患排查制度
2015/08/05 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL