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> 如果页面 ...
随机推荐
- Protobuf 数据类型
.proto Type Notes C++ Type Java Type double double double float float float int32 Uses var ...
- java反射之构造方法(三)
一. 1. 二.获取类的构造方法信息. ######################################################################## 三.
- 写几个简单用artTemplate的例子
写几个简单的artTemplate的例子,很多框架都有自己的模板(template),没得时候,可以利用artTemplate.js完成 html文件是: <!DOCTYPE html> ...
- IOS开发如何入门
说到 iOS 开发,自己学得也很浅.不过至少独立一人完成了一个应用的开发到项目上线整个过程.分享一下自己的建议和想法. 首先建议阅读 Start Developing iOS Apps Today,你 ...
- LightOJ - 1074 Extended Traffic (SPFA+负环）
题意:N个点,分别有属于自己的N个busyness(简称b),两点间若有边,则边权为(ub-vb)^3.Q个查询,问从点1到该点的距离为多少. 分析:既然是差的三次方,那么可能有负边权的存在,自然有可 ...
- Tomcat之并发优化
1.位置: (1)/opt/tomcat7/conf下的server.xml文件中<Connector>节点的配置优化,记得先备份. (2)出厂默认(在server.x ...
- ashx 方法模板
; ); //查询字符串拼接 string searchparams = DTRequest.GetQueryString("jsonstring"); fooddetail mo ...
- encoder-decoder环境部署问题
pip -v 2.7 cp -r pip2.7 pip pip list appdirs (1.4.3)cycler (0.10.0)distribute (0.7.3)extern (0.1. ...
- spring cron表达式及解析过程
1.cron表达式 cron表达式是用来配置spring定时任务执行时间的字符串,由5个空格分隔成的6个域构成,格式如下: {秒} {分} {时} {日} {月} {周} 每一个域的含义解释 ...
- Metasploit 学习
知识准备:CCNA/CCNP基础计算机知识框架:操作系统.汇编.数据库.网络.安全 木马.灰鸽子.口令破解.用后门拷贝电脑文件 渗透测试工程师 penetration test engineer &l ...