两种方法实现在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实现运行代码需要刷新的解决方法
Aug 18 Javascript
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
jQuery中:text选择器用法实例
Jan 03 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
在React中如何优雅的处理事件响应详解
Jul 24 Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
uni-app 自定义底部导航栏的实现
Dec 11 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
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
php文件操作小结(删除指定文件/获取文件夹下的文件名/读取文件夹下图片名)
2016/05/09 PHP
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
Python中的各种装饰器详解
2015/04/11 Python
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
python目录与文件名操作例子
2016/08/28 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
HTML5 Canvas像素处理使用接口介绍
2012/12/02 HTML / CSS
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
抽象类和接口的区别
2012/09/19 面试题
标准毕业生自荐信范文
2013/11/04 职场文书
新春联欢会主持词
2014/03/24 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
爱心捐书倡议书
2015/04/27 职场文书
服务行业标语口号
2015/12/26 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
Python Django模型详解
2021/10/05 Python
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers