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 相关文章推荐
用tip解决Ext列宽度不够的问题
Dec 13 Javascript
33种Javascript 表格排序控件收集
Dec 03 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
AngularJS基础 ng-csp 指令详解
Aug 01 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
详解js的六大数据类型
Dec 27 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 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
完美实现GIF动画缩略图的php代码
2011/01/02 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
img标签中onerror用法
2009/08/13 Javascript
javascript在事件监听方面的兼容性小结
2010/04/07 Javascript
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
js中的this关键字详解
2013/09/25 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
Python交换变量
2008/09/06 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
python支持多线程的爬虫实例
2019/12/21 Python
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
英语专业学生的自我评价
2013/12/30 职场文书
会计专业毕业生求职信分享
2014/01/03 职场文书
给同学的道歉信
2014/01/16 职场文书
消防应急演练方案
2014/02/12 职场文书
导游个人求职信范文
2014/03/23 职场文书
人民调解员先进事迹材料
2014/05/08 职场文书
毕业生自荐信范文
2015/03/05 职场文书