js中页面加载完成后执行的几种方式及执行顺序
1：使用jQuery的$(function){};
2：使用jquery的$(document).ready(function(){});前两者本质上没有区别，第1种是第2种的简写方式。两个是document加载完成后就执行方法。
3：使用jQuery的$(window).load(function(){});
4:使用window.onload = function(){} 第3种和第4种都是等到整个window加载完成执行方法体。两者也没有区别，只是一个使用dom对象，一个使用jQuery对象。
5：在标签上静态绑定onload事件，<body onload="aaa()">等待body加载完成，就会执行aaa()方法。
那么，这五种方式，执行的先后顺序是怎么样的呢？
通过下方代码验证发现：
使用1：jQuery的$(function){}和2：jquery的$(document).ready(function(){});无论位置放置在哪里，总是优先其余三种方式（原因是：这两种方式是在document加载完成后就执行，后三种是等到整个window页面加载完成后才执行），这两者之间的执行顺序是谁在上方谁优先执行。
使用3：jQuery的$(window).load(function(){});和4:window.onload = function bbb(){}这两种方式，总是优先于<body onload="aaa()">执行。他们两者执行顺序也是根据谁在上方谁先执行。
使用5：<body onload="aaa()">总是最后执行。
重点到了！如果要对未来元素操作的话以上这些对IE浏览器是不管用的。要等未来元素加载完后再执行js的话，我们就要给个定时器达到延迟加载的效果：
$(window).load(function(){
setTimeout(function(){
console.log($(".tbody tr"))
$(".tbody tr:odd").css("backgroundColor","#F5F6FA");
},30)
});
js中页面加载完成后执行的几种方式及执行顺序的更多相关文章
- js中页面加载完成后执行的几种方法及执行顺序
在js和jquery使用中,经常使用到页面加载完成后执行某一方法.通过整理,大概是五种方式(其中有的只是书写方式不一样). 1:使用jQuery的$(function){}; 2:使用jquery的$ ...
- Javascript中页面加载完成后优先执行顺序
Javascript中页面加载完成后优先执行顺序 document优先于windowwindow优先于element //document加载完成执行方法体 document.addEventList ...
- 关于 第三方接口支付的时候 采用post提交的方式，有两种 一种是通过 curl来进行，一种是通过js当页面加载完后跳转
这是第一种.通过javascript页面加载完后,对表单采用 post方式提交给 第三方接口----- echo <<<_END<!DOCTYPE html PUBLIC &q ...
- js实现 页面加载 完成 后顺序 执行
function addLoadEvent(func){ var oldonLoad = window.onload; if(typeof window.onload != 'function'){ ...
- js页面加载完后执行（document.onreadystatechange 和 document.readyState）
js页面加载完后执行javascript(document.onreadystatechange 和 document.readyState) document.onreadystatechange ...
- 页面加载完毕后调用js方法进行布局操控 已实验
页面加载完毕后调用js方法进行布局操控 已实验 $(function(){ var check1 = $("[id$=SMS]").is(':checked'); var bl=$ ...
- 转:JS线程和JS阻塞页面加载的问题
前几日写了一篇文章,介绍了js阻塞页面加载的问题.当时是通过例子来验证的.今天,我介绍一下浏览器内核,从原理上介绍一下js阻塞页面加载的原因. 浏览器的内核是多线程的,它们在内核制控下相互配合以保持同 ...
- js判断页面加载完毕方法
判断页面加载完成这个方法是很常见的,下面有三个常用的方法,各有利弊. 一.纯js方法 // (1).页面所有内容加载完成执行 window.onload = function(){ } // (2). ...
- 页面加载完成后，触发事件——trigger（）
<button id="btn">点击我</button> <div id="test"></div> 如果页面 ...
随机推荐
- 读取、设置 php.ini配置文件（复制）
1.ini_get()获取配置参数,ini_set()设置配置参数 复制代码 代码如下: <?phpecho ini_get('display_errors'); //1//动态修改php.in ...
- Sqlserver生成带数据的脚本
右键数据库—>任务—>生成脚本 下一步 选择要导出数据库,下一步 编写数据脚本选择True,下一步 选择要导出的表,下一步 最后点击完成即可.
- Django Restful API Class Based View
基于class定义view 前言: 我们首先通过以class的方式重写view,我们可以自己构造类也可以通过res_framework 提供的mixins和generics类库直接构造类 下面来看下自 ...
- Problem A. Array Factory XVII Open Cup named after E.V. Pankratiev Stage 4: Grand Prix of SPb, Sunday, Octorber 9, 2016
思路: 直接二分长度不可行,因为有负数. 考虑枚举坐便删l个数,那如果可以在短时间内求出符合条件的右边最小删的数的个数,这题便可做了. 即:当左边删l个数时,要使sum[n]-sum[l]-fsum[ ...
- Gentoo64无法启动eth0的问题
Gentoo64在net文件中配置好eth0的静态IP 代码 1.2: /etc/conf.d/net文件的一个示例 # DHCP config_eth0=( "dhcp" ) # ...
- spark学习(基础篇)--(第三节)Spark几种运行模式
spark应用执行机制分析 前段时间一直在编写指标代码,一直采用的是--deploy-mode client方式开发测试,因此执行没遇到什么问题,但是放到生产上采用--master yarn-clus ...
- 了解Java应用中的开发攻击
注入式(Inject)攻击是一类非常常见的攻击方式,其基本特征是允许攻击者将不可信的动态内容注入到程序中,并将其执行,这就可能完全改变最初预计的执行过程,产生恶意效果. 下面是几种主要的注入式攻击途径 ...
- $ MySQL-python数据库模块用法
本文主要介绍在python中如何使用MySQL数据库. 准备工作 安装mysql Linux (Ubuntu) apt-get install mysql-server 安装完成之后在命令行中输入:m ...
- DataTables VS EasyUI DataGrid 基础应用 转
DataTables中文网推出了 第一篇 关于DataTables和其他表格插件比较后,为了把让这个比较更有意义,更能帮助到大家,DataTables中文网 做了问卷调查,根据小伙伴们的填写我归纳了一 ...
- 先记录一下吧 开始的程序 hello!java!
起床后就跟着老师的教学,也稍微学了一些,刚开始用java. 一堆大小写字母注意不过来,很尴尬. 虽然只是成功了一个"hello java "的简单的不能再简单的小程序,不过还是有点 ...