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版本A*寻路算法
Dec 22 Javascript
将函数的实际参数转换成数组的方法
Jan 25 Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
JS正则验证邮箱的格式详细介绍
Nov 19 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
基于BootStarp的Dailog
Apr 28 Javascript
AngularGauge 属性解析详解
Sep 06 Javascript
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 Javascript
VUE中使用MUI方法
Feb 12 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
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
javascript 定义新对象方法
2010/02/20 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
vue axios 二次封装的示例代码
2017/12/08 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
python类定义的讲解
2013/11/01 Python
python迭代器的使用方法实例
2013/11/21 Python
python中requests模块的使用方法
2015/04/08 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
python mysql断开重连的实现方法
2019/07/26 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
2014年党务公开方案
2014/05/08 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js