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> 如果页面 ...
随机推荐
- Linux系统——本地yum仓库安装
一.yum仓库概述 yum是基于rpm包管理,能够从指定的服务器自动下载rpm包并且安装,可以自动处理依赖性关系,并且一次安装所有依赖的软件包,无需繁琐地一次次下载.安装. 二.yum仓库安装的方式 ...
- LINQ查询中的IEnumerable<T>和IQueryable<T>
LINQ查询方法一共提供了两种扩展方法,在System.Linq命名空间下,有两个静态类:Enumerable类,它针对继承了IEnumerable<T>接口的集合进行扩展:Queryab ...
- iOS 开发，混合使用 ARC 和非ARC
[前提知识] ARC:Automatic Reference Counting,自动引用计数 在开发 iOS 3 以及之前的版本的项目时我们要自己负责使用引用计数来管理内存,比如要手动 retain. ...
- Linux Java环境搭建
-------------------------网络配置-------------------------------1.配置DNS:vi /etc/resolv.confnameserver 19 ...
- 算法+OpenCV】基于opencv的直线和曲线拟合与绘制（最小二乘法）
http://blog.csdn.net/guduruyu/article/details/72866144 最小二乘法多项式曲线拟合,是常见的曲线拟合方法,有着广泛的应用,这里在借鉴最小二乘多项式曲 ...
- live555笔记_hi3516A
1.简介 是一个为流媒体提供解决方案的跨平台的C++开源项目,它实现了对标准流媒体传输是一个为流媒体提供解决方案的跨平台的C++开源项目,它实现了对标准流媒体传输协议如RTP/RTCP.RTSP.SI ...
- Object的各种方法
Object的一些知识点总结 1.hasOwnProperty obj.hasOwnProperty(prop) 参数 prop: 要检测的属性字符串名称或者Symbol 返回值 用来判断一个对象是否 ...
- RabbitMQ单机多实例配置
由于某些因素的限制,有时候你不得不在一台机器上去搭建一个rabbitmq集群,当然这种集群只适合自己玩玩,验证下结论,这个有点类似zookeeper的单机版.真实生成环境还是要配成多机集群的.有关怎么 ...
- Package Manager Console的使用
Find-Package PM> Find-Package autofac https://docs.microsoft.com/en-us/nuget/tools/ps-ref-find-pa ...
- mybatis中使用mysql的模糊查询字符串拼接（like）
方法一: <!-- 根据hid,hanme,grade,模糊查询医院信息--> 方法一: List<Hospital> getHospitalLike(@Param(" ...