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 相关文章推荐
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
JavaScript URL参数读取改进版
Jan 16 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
Mar 10 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 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关键字仅替换一次的实现函数
2015/10/29 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
详解Angular 自定义结构指令
2017/06/21 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
python操作mysql数据库
2017/03/05 Python
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
Python通过len函数返回对象长度
2020/10/22 Python
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
学术会议欢迎词
2014/01/09 职场文书
石油大学毕业生自荐信
2014/01/28 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
大学生赌博检讨书
2014/09/22 职场文书
个人创业事迹材料
2014/12/30 职场文书
中标通知书
2015/04/17 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书
python中的3种定义类方法
2021/11/27 Python
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL