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 相关文章推荐
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 Javascript
javascript 闭包详解
Jul 02 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
javascript字符串函数汇总
Dec 06 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
详解angular用$sce服务来过滤HTML标签
Apr 11 Javascript
详解vue项目构建与实战
Jun 27 Javascript
JS计算斐波拉切代码实例
Sep 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
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
php+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
使用PHP编写的SVN类
2013/07/18 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
js如何打印object对象
2015/10/16 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
Python卸载模块的方法汇总
2016/06/07 Python
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
如何在python中使用selenium的示例
2017/12/26 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
Python jieba库用法及实例解析
2019/11/04 Python
Python调用Windows命令打印文件
2020/02/07 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
html5定位并在百度地图上显示的示例
2014/04/27 HTML / CSS
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
关于廉洁的广播稿
2014/01/30 职场文书
端午节演讲稿
2014/05/23 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
爱心捐款活动总结
2015/05/09 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js