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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
JAVASCRIPT对象及属性
Feb 13 Javascript
js不能跳转到上一页面的问题解决方法
Mar 01 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
javascript定时器完整实例
Feb 10 Javascript
浅谈JavaScript中的分支结构
Jul 01 Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
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
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
30个php操作redis常用方法代码例子
2014/07/05 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
JavaScript 拖拉缩放效果
2008/12/10 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
vue-cli3.0 环境变量与模式配置方法
2018/11/08 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
Django 框架模型操作入门教程
2019/11/05 Python
pytorch下大型数据集(大型图片)的导入方式
2020/01/08 Python
python编写实现抽奖器
2020/09/10 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
捷克汽车配件和工具销售网站:TorriaCars
2018/02/26 全球购物
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
外国语学院毕业生自荐信
2013/10/28 职场文书
双语教学实施方案
2014/03/23 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
医院科室评语
2015/01/04 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
导游词之西安骊山
2019/12/03 职场文书
dubbo服务整合zipkin详解
2021/07/26 Java/Android