两种方法实现在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 相关文章推荐
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 Javascript
js中replace的用法总结
Dec 27 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
Javascript闭包与函数柯里化浅析
Jun 22 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
ES6入门教程之Class和Module详解
May 17 Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 Javascript
jquery实现简单拖拽效果
Jul 20 jQuery
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
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
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
防止用户利用PHP代码DOS造成用光网络带宽
2011/03/01 PHP
php json_encode奇怪问题说明
2011/09/27 PHP
PHP基础之运算符的使用方法
2013/04/28 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
Ajax基础知识详解
2017/02/17 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
js实现小星星游戏
2020/03/23 Javascript
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
Python 文件处理注意事项总结
2017/04/10 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
Python使用shutil模块实现文件拷贝
2020/07/31 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
体育专业个人求职信范文
2013/12/27 职场文书
世界地球日活动总结
2015/02/09 职场文书
可可西里观后感
2015/06/08 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
《角的初步认识》教学反思
2016/02/17 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
VUE递归树形实现多级列表
2022/07/15 Vue.js