两种方法实现在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 相关文章推荐
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
JS实现拖动示例代码
Nov 01 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
gulp解决跨域的配置文件问题
Jun 08 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 Javascript
React配置子路由的实现
Jun 03 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
Discuz! Passport 通行证整合
2008/03/27 PHP
理解PHP中的stdClass类
2014/04/18 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
PHP中cookie知识点学习
2018/05/06 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
jQuery 浮动广告实现代码
2008/12/25 Javascript
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
javascript连续赋值问题
2015/07/08 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
9种改善AngularJS性能的方法
2017/11/28 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
react 生命周期实例分析
2020/05/18 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
给校长的一封建议书
2014/03/12 职场文书
四风问题查摆材料
2014/08/25 职场文书
领导批评与自我批评范文
2014/10/16 职场文书
销售业务员岗位职责
2015/02/13 职场文书
2016年学校招生广告语
2016/01/28 职场文书
倡议书怎么写?
2019/04/11 职场文书
MySQL的索引你了解吗
2022/03/13 MySQL