两种方法实现在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 相关文章推荐
javascript getElementsByClassName实现代码
Oct 11 Javascript
动态加载脚本提升javascript性能
Feb 24 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
Javascript显示和隐藏ul列表的方法
Jul 15 Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
代码整洁之道(重构)
Oct 25 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 Javascript
关于vue-cli3打包代码后白屏的解决方案
Sep 02 Javascript
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
js实现弹幕墙效果
Dec 10 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 IP及IP段进行访问限制的代码
2008/12/17 PHP
获取URL文件名后缀
2013/10/24 PHP
PHP中soap的用法实例
2014/10/24 PHP
php查找字符串出现次数的方法
2014/12/01 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
javascript 实现map集合
2015/04/03 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
AngularJs实现分页功能不带省略号的代码
2016/05/30 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
python下MySQLdb用法实例分析
2015/06/08 Python
python基本语法练习实例
2017/09/19 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
python之文件读取一行一行的方法
2018/07/12 Python
Python银行系统实战源码
2019/10/25 Python
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
Prototype如何更新局部页面
2013/03/03 面试题
怎样写演讲稿
2014/01/04 职场文书
校园安全广播稿
2014/02/08 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
小学六年级毕业感言
2015/07/30 职场文书
在python中实现导入一个需要传参的模块
2021/05/12 Python