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中页面加载完成后执行的几种方式及执行顺序的更多相关文章

  1. js中页面加载完成后执行的几种方法及执行顺序

    在js和jquery使用中,经常使用到页面加载完成后执行某一方法.通过整理,大概是五种方式(其中有的只是书写方式不一样). 1:使用jQuery的$(function){}; 2:使用jquery的$ ...

  2. Javascript中页面加载完成后优先执行顺序

    Javascript中页面加载完成后优先执行顺序 document优先于windowwindow优先于element //document加载完成执行方法体 document.addEventList ...

  3. 关于 第三方接口支付的时候 采用post提交的方式，有两种 一种是通过 curl来进行，一种是通过js当页面加载完后跳转

    这是第一种.通过javascript页面加载完后,对表单采用 post方式提交给 第三方接口----- echo <<<_END<!DOCTYPE html PUBLIC &q ...

  4. js实现 页面加载 完成 后顺序 执行

    function addLoadEvent(func){ var oldonLoad = window.onload; if(typeof window.onload != 'function'){ ...

  5. js页面加载完后执行（document.onreadystatechange 和 document.readyState）

    js页面加载完后执行javascript(document.onreadystatechange 和 document.readyState) document.onreadystatechange ...

  6. 页面加载完毕后调用js方法进行布局操控 已实验

    页面加载完毕后调用js方法进行布局操控 已实验 $(function(){ var check1 = $("[id$=SMS]").is(':checked'); var bl=$ ...

  7. 转:JS线程和JS阻塞页面加载的问题

    前几日写了一篇文章,介绍了js阻塞页面加载的问题.当时是通过例子来验证的.今天,我介绍一下浏览器内核,从原理上介绍一下js阻塞页面加载的原因. 浏览器的内核是多线程的,它们在内核制控下相互配合以保持同 ...

  8. js判断页面加载完毕方法

    判断页面加载完成这个方法是很常见的,下面有三个常用的方法,各有利弊. 一.纯js方法 // (1).页面所有内容加载完成执行 window.onload = function(){ } // (2). ...

  9. 页面加载完成后，触发事件——trigger（）

    <button id="btn">点击我</button> <div id="test"></div> 如果页面 ...

随机推荐

  1. HttpClient使用详解(转)

    http://blog.csdn.net/wangpeng047/article/details/19624529

  2. 【转】阿里巴巴技术专家杨晓明：基于Hadoop技术进行地理空间分析

    转自:http://www.csdn.net/article/2015-01-23/2823687-geographic-space-base-Hadoop [编者按]交通领域正产生着海量的车辆位置点 ...

  3. 使用 vim + ctags + cscope + taglist 阅读源码

    转自:http://my.oschina.net/u/554995/blog/59927 最近,准备跟学长一起往 linux kernel 的门里瞧瞧里面的世界,虽然我们知道门就在那,但我们还得找到合 ...

  4. 理解js的DOM操作

    1.DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动.document.documentElement     返回文档的根节点<html> document.body ...

  5. NC开发笔记指导

    修改端口 InvocationInfoProxy.getInstance().get().getUserCode(); 前台 Nchome F:\JAVA\Projects\ERPEHROA\ufid ...

  6. String类型 在底层剖析，并比较 与StringBuilding 的区别

    1.string和 stringbuilder的区别: String在任何语言中,都有它的特殊性,在.NET中也是如此.它属于基本数据类型,也是基本数据类型中唯一的引用类型.字符串可以声明为常量,但是 ...

  7. 前端学习笔记之BOM和DOM

    前言 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...

  8. Swoole学习(五)Swoole之简单WebSocket服务器的创建

    环境:Centos6.4,PHP环境:PHP7 服务端代码 <?php //创建websocket服务器 $host = '0.0.0.0'; $port = ; $ws = new swool ...

  9. tab标签 插件 by 腾讯 jianminlu

    /** * @version 0.1 * @author jianminlu * @update 2013-06-19 15:23 */ (function ($) { /** * @name tab ...

  10. saltstack之nginx、php的配置

    saltstack为nginx提供状态配置 1.创建nginx配置需要的目录 mkdir /srv/salt/prod/nginx mkdir /srv/salt/prod/nginx/files 2 ...