html5页面加载执行动作,页面加载完成后执行JS的5种方式

在js和jquery使用中，常用到页面加载完成后执行某一方法。经过整理，大概是五种方式。javascript

1.jQuery的$( function(){} );html

2.jQuery的$(document).ready( function(){} );前二者本质上没有区别，第1种是第2种的简写方式。两个是document加载完成后就执行方法。java

3.jQuery的$(window).load( function(){} );jquery

4.window.onload = function(){}第3种和第4种都是等整个window加载完成执行方法体。二者也没有区别，只是一个使用dom对象，一个使用jQuery对象。dom

5.在标签上静态绑定onload事件，

等待body加载完成，就会执行executeAfterloadedBody()。spa

window.onload必须等到页面内包括图片的全部元素加载完毕后才能执行，$(document).ready()是DOM结构绘制完毕后就执行，没必要等到加载完毕

window.onload不能同时编写多个，若是有多个window.onload方法，只会执行一个，$( function(){} )/$(document).ready()能够同时编写多个，而且均可以获得执行

这五种方式，执行的前后顺序是:htm

1.$( function(){} );和 2.$(document).ready( function(){} );不管位置放置在哪里，老是优先其他三种方式(缘由是：这两种方式是在document加载完成后就执行，后三种是等到整个window页面加载完成后才执行)，这二者之间的执行顺序是谁在上方谁优先执行。对象

3.$(window).load(function(){});和4.window.onload = function(){}这两种方式，老是优先于

执行。他们二者执行顺序也是根据谁在上方谁先执行。blog

老是最后执行。事件

window.onload = function(){

alert("window_html loaded====》onload");

}

$(window).load(function(){

alert("jquery===》window_html loaded" );

})

$(document).ready(function () {

alert("jquery====》document loaded");

});

$(function(){

alert("jquery====》document onload");

});

function executeAfterloadedBody(){

alert("====》onload");

}

html5页面加载执行动作,页面加载完成后执行JS的5种方式相关推荐

js html异步加载的属性,异步加载JS的五种方式
方案一: 点评:HTML5中新增的属性,Chrome.FF.IE9&IE9+均支持(IE6~8不支持).此外,这种方法不能保证脚本按顺序执行. 方案二: 点评:兼容所有浏览器.此外,这种方法可 ...
hibernate 查询id为空懒加载_hibernate 查询时指定查询字段、级联表的一种方式
本文转载于 SegmentFault 社区社区专栏:河北工业大学梦云智软件开发团队作者:myskies 最近在进行数据统计查询时屡次遇到慢查询事件,最终发现问题发生在 hibernate的查询操作上. ...
页面引入JS的四种方式
最常用的是前面的三种. 行内引入: 内部引入: 需要一个标签<script></script>引入js 注意事项: 外部引入: 创建一个独立的外部 js 文件, 用 <s ...
js 和jQuery（自动执行函数）立即执行函数和页面加载完后执行函数写法
js 立即执行函数的写法. js 立即执行函数只能用于匿名函数,如果声明了函数名是不可以用立即执行的,通常在函数表达式后加一对小括号()用于立即执行如果想让函数不被调用的情况下,立即自动执行,需要在 ...
页面加载的几种方式和区别
目录页面加载的几种方式 DOM文档加载步骤原生JS的 ready阶段执行方法怎么写? 全部方式的演示代码 window和document的区别页面加载的几种方式(原生JS和jQuery) 1. ...
异步加载js的三种方法
js加载时间线 : 它是根据js出生的那一刻开始记录的一系列浏览器按照顺序做的事,形容的就是加载顺序,可以用来优化什么东西,理论基础,背下来. 1.创建Document对象,开始解析web页面.解析H ...
Vue项目点击刷新页面的三种方式
Vue项目点击刷新页面的三种方式一.原生js刷新方式: location.reload(); 二.Vue框架自带的路由跳转方式: this.$router.go(0); 三.在App.vue页面声明 ...
SpringBoot启动时实现自动执行代码的几种方式讲解
点击关注公众号,实用技术文章及时了解来源:blog.csdn.net/u011291072/article/ details/81813662 前言目前开发的SpringBoot项目在启动的时候需 ...
接口测试工具--apipost预/后执行脚本
ApiPost预执行脚本:预执行脚本就是在接口发送之前执行脚本中的脚本. 我们在预执行脚本中使用console.log("预执行脚本")打印预执行脚本这句话就会在接口请求发送之前 ...

html5页面加载执行动作,页面加载完成后执行JS的5种方式

html5页面加载执行动作,页面加载完成后执行JS的5种方式相关推荐

最新文章

热门文章