js页面加载后执行的几种方式小结


Posted in Javascript onJanuary 30, 2020

在实际应用中往往需要在页面加载完毕之后再去执行相关的js代码,之所以这么操作是有道理的,如果是操作dom元素,如果相关元素没有加载完成,而去执行js代码,可能会导致错误,下面就介绍一下如何实现页面加载完成再去执行代码,这是最为基础的知识了,可能初学者还不太了解,寄希望能够给需要的朋友带来一定帮助。

一.window.onload事件:

代码如下:

原生js

window.onload=function(){
 //code
}

jquery

$(window).load(function(){
//code
});

当页面完全加载完毕之后再去执行code代码。说明页面需要dom操作,必须到最后才可以执行。

二.使用jQuery的ready事件:

$(document).ready(function() { 
 //code
});

一般

(function () {
//code
}
})();

当稳当结构加载完毕再去执行code代码。

通用的页面加载后再运行JS有两种方式:1、在DOM加载完毕后,页面全部内容(如图片等)完全加载完毕前运行JS。 2、在页面全部内容加载完成(包括引用文件,图片等)之后再加载JS

1、在DOM加载后,全部内容加载前运行
这种方式在同一文件中可以运行多个且不会覆盖。

由于在$(document).ready()方法只要DOM就绪就会被执行,因此可能此时元素的关联文件未下载完。例如与图片有关的HTML下载完毕,并且已经解析为DOM树了,但很有可能图片还未加载完毕,所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题,可以使用Jquery中 load()方法在需要的文件加载完毕后对其进行操作。

$(document).ready(function(){});
$().ready(function(){})

//简写 当$()不带参数时默认就是document
$(function(){});

//简写

2、在全部内容加载后运行
这种方式中只能执行一个 onload代码,当文件由多个onload或者load,只加载最后一个,前面的将会被覆盖且前面的onload里面的代码不会执行。

window.onload = function(){}; // —-js
$(window).load(function(){});

//---jquery

3、DOM文档加载步骤

1.解析HTML结构
2.加载外部的脚本和样式文件
3.解析并执行脚本代码
4.执行$(function(){})内对应代码
5.加载图片等二进制资源
6.页面加载完毕,执行window.onload

补充:

1:$(function){};

2:$(document).ready(function(){});

3:$(window).load(function(){});

4:window.onload = function(){};

5:在标签上静态绑定onload事件,<body onload="aaa()">等待body加载完成,就会执行aaa()方法。

注:第1种是第2种的简写方式。两个是document加载完成后就执行方法。第3种和第4种都是等到整个window加载完成执行方法体。两者也没有区别,只是一个使用dom对象,一个使用jQuery对象。

执行顺序:1和2无论放在哪里都是最先执行,3和4在其之后执行,5最后执行

Javascript 相关文章推荐
js预载入和JavaScript Image()对象使用介绍
Aug 28 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 Javascript
ajax异步刷新实现更新数据库
Dec 03 Javascript
Jquery 数组操作大全个人总结
Nov 13 Javascript
JavaScript弹出窗口方法汇总
Aug 12 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
手机端页面rem宽度自适应脚本
May 20 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
javascript设计模式之装饰者模式
Jan 30 #Javascript
原生js+ajax分页组件
Jan 30 #Javascript
javascript设计模式之迭代器模式
Jan 30 #Javascript
通过Kettle自定义jar包供javascript使用
Jan 29 #Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 #Javascript
vue引用外部JS的两种种方法
Jan 28 #Javascript
Java Varargs 可变参数用法详解
Jan 28 #Javascript
You might like
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
javascript onmouseout 解决办法
2010/07/17 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
理解Angular数据双向绑定
2016/01/10 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
python语言中with as的用法使用详解
2018/02/23 Python
python统计字符的个数代码实例
2020/02/07 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
How to spawning asynchronous work in J2EE
2016/08/29 面试题
感恩节红领巾广播稿
2014/02/11 职场文书
2014年党员公开承诺书范文
2014/03/28 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
关爱空巢老人感想
2015/08/11 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技