In Chapter 1, Getting Started, we noted that $(document).ready()was jQuery's primary way to perform tasks on page load. It is not, however, the only method at our disposal. The native window.onloadevent can achieve a similar effect. While the two methods are similar, it is important to recognize their difference in timing, even though it can be quite subtle depending on the number of resources being loaded.

在第一章，入门指南中，我们说明了$(document).ready()是jquery用来在页面加载的时候执行任务的私有的方法。然而，他不是我们可用的唯一的方法。原生的window.onload事件可以实现相似的影响。随涨这两个方法是相似的，但是辨别出他们在执行是的不同是十分重要的，尽管他们可能只是在加载资源的数量上有着微妙的不同。

The window.onloadevent fires when a document is completely downloaded to the browser. This means that every element on the page is ready to be manipulated by JavaScript, which is a boon for writing featureful code without worrying about load order.

window.onload事件在文档完全被加载到浏览器的时候执行。这意味着网页上每一个元素已经可以被js操纵了。这对我们写有特色的代码而不用担心加载顺序这一点是一个福利。

On the other hand, a handler registered using $(document).ready()is invoked when the DOM is completely ready for use. This also means that all elements are accessible by our scripts, but does not mean that every associated file has been downloaded. As soon as the HTML has been downloaded and parsed into a DOM tree, the code can run.

另一方面，使用$(document).ready()注册的方法在DOM结构完全可以使用的时候被调用。这也意味着所有的元素可以通过我们的脚本来接触到，但是这不意味着所有相关的文件已经被下载下来了。一旦HTML已经被加载而且被解析成DOM树的时候，这段代码就可以执行了。

Style loading and code execution
To ensure that the page has also been styled before the JavaScript code executes, it is a good practice to place <link rel="stylesheet">and <style>tags prior to <script>tags within the document's <head>element.

样式加载和代码执行
为了确保在js代码执行之前已经加载了样式，在文档的head元素里面把 <script>标签放到<style>和<link rel="stylesheet">之前是一个很好的实践。

Consider, for example, a page that presents an image gallery; such a page may have many large images on it, which we can hide, show, move, and otherwise manipulate with jQuery. If we set up our interface using the onloadevent, users will have to wait until each and every image is completely downloaded before they can use those features. Even worse, if behaviors are not yet attached to elements that have default behaviors (such as links), user interactions could produce unintended outcomes. However, when we use $(document).ready()for the setup, the interface is ready to use earlier with the correct behavior.

比如，假设一个网页需要呈现一个图片库，这样的网页可能有很多很大的网页，我们可能隐藏移动或者使用jquery操控他们。如果我们使用onload事件去启动我们的界面，用户可能需要等到所有的图片被完全加载以后才可能使用这些特性。更糟糕的是，如果行为还没有绑定到拥有默认行为的元素上的时候（比如links），用户的反应可能会造成我们本不想要的输出。然而，当我们使用$(document).ready()来启动页面，页面会更早的拥有正确的行为。

What is loaded and what is not?
Using $(document).ready()is almost always preferable to using an onloadhandler, but we need to keep in mind that because supporting files may not have loaded, attributes such as image height and width are not necessarily available at this time. If these are needed, we may, at times, also choose to implement an onloadhandler (or more likely, use jQuery to bind a handler to the loadevent); the two mechanisms can coexist peacefully.

什么被加载了，什么没有被加载
使用$(document).ready()几乎总是比使用onload处理器要好，但是我们需要牢牢记住由于支持文件可能还没有被加载，类似于图片高度和宽度的属性在这是可能是不可用的。如果我们需要这些属性，有时候，我们可能需要选择实现onload处理器（或者更好的是，使用jquery去绑定一个onload处理器），这两种机制可以和平共处。

（4）事件处理——（3）代码执行的顺序（Timing of code execution）的更多相关文章

  1. jsp中java代码、jsp代码、js代码执行的顺序

    原理: jsp中的Java代码 -- 服务器端代码 js代码 -- 客户端代码 java是在服务器端运行的代码,jsp在服务器的servlet里运行,而JavaScript和html都是在浏览器端运行 ...

  2. 使用定时器判断确保某个标签有值才执行方法, 控制js代码执行先后顺序

    使用定时器判断确保某个标签有值才执行方法: var wait = setInterval(function(){ var diqu = $("#diqu").val(); //确保 ...

  3. github上拉去代码执行 npm install报错code：128

    npm ERR! code npm ERR! Command failed: D:\Program Files\Git\cmd\git.EXE clone --mirror -q git://gith ...

  4. mysql之代码执行结构

    本文内容: 什么是代码执行结构 顺序结构 分支结构 循环结构 首发日期:2018-04-18 什么是代码执行结构: 这里所说的代码执行结构就是多条sql语句的执行顺序. 代码执行结构主要用于触发器.存 ...

  5. PHP代码执行流程

    怎么样?有点了解了么.说实话,单看这个,我本人是有点懵的,不过,不要怕.咱们来慢慢地看下. 首先,在网上找的信息说PHP代码执行的顺序是这样的,第一步是词法分析,第二步是语法分析,第三步是转化为opc ...

  6. Java代码执行顺序(静态变量，非静态变量，静态代码块，代码块，构造函数)加载顺序

    //据说这是一道阿里巴巴面试题,先以这道题为例分析下 public class Text { public static int k = 0; public static Text t1 = new ...

  7. 当C#中带有return的TryCatch代码遇到Finally时代码执行顺序

    编写的代码最怕出现的情况是运行中有错误出现,但是无法定位错误代码位置.综合<C#4.0图解教程>,总结如下: TryCatchFinally用到的最多的是TryCatch,Catch可以把 ...

  8. js代码执行顺序问题

      前  言 LiuDaP 今天就给大家介绍一个特别基础的东西,javascript中函数的一点儿小知识(js代码的执行顺序),希望对大家有那么一点点帮助吧!!! 一.js--->单线程 严格意 ...

  9. final、static、代码块、静态代码块、内部类、代码执行顺序

    final final域使得确保初始化安全性(initialization safety)成为可能,初始化安全性让不可变形对象不需要同步就能自由地被访问和共享 作用在类上               ...

随机推荐

  1. 查询SQL中字符串里有多少个逗号

    select len(@str)-len(replace(@str,',',''))

  2. Php5.3的lambda函数以及closure(闭包)

    从php5.3以后,php也可以使用lambda function(可能你会觉得是匿名函数,的确是但不仅仅是)来写类似javascript风格的代码: $myFunc = function() { e ...

  3. Android Every day a new function:one

    扁平化按钮" 效果图: 代码: <?xml version="1.0" encoding="utf-8"?> <selector x ...

  4. WinCE 5.0模拟器,在 win7 下安装后, VS2008里不显示

    来源:http://blog.csdn.net/masterlonely/article/details/8302932 现状: Win7 32位旗舰版 VS2008 Team 在安装了: Windo ...

  5. hdu 4512 吉哥系列故事——完美队形I LCIS

    题目链接 给一个数列, 在里面选出一些数组成一个对称的数列, 数的顺序不能打乱. 使得左半边是一个严格递增的数列, 右边递减, 并且a[i] = a[n-i+1]. 就是一个对称的LCIS.. #in ...

  6. 搞了一个独立博客，请各位光临pingworld.cn

    嘿嘿,每次在一个大网站上建立自己的博客后总是没有动力持续更新下去,回想其原因很大是因为没有一个自己的地盘,懒得维护!还有一个原因就是自己也没有什么干货值得跟大家分享. 随着工作的时日见长,有了各种各样 ...

  7. hacker入门篇——相关书籍

    1.<黑客大曝光:网络安全机密与解决方案(第7版)> 简介:这是一本老外写的书,比较适合入门看,内容包括一些基本的攻防流程,基本工具软件,网络安全的一些基本概念等,对整个网络安全和黑客入侵 ...

  8. 基于Socket的UDP和TCP编程介绍

    一.概述 TCP(传输控制协议)和UDP(用户数据报协议是网络体系结构TCP/IP模型中传输层一层中的两个不同的通信协议. TCP:传输控制协议,一种面向连接的协议,给用户进程提供可靠的全双工的字节流 ...

  9. (9)Xamarin测试账号申请与续用

    原文 Xamarin测试账号申请与续用 在Xamarin网站上可以申请30天试用的测试账号.试用期内,Xamarin会提供完整的功能试用. 30天试用时间到期后,在Visual Studio里面你加载 ...

  10. 转：onkeypress、onkeydown、onkeyup 区别

    在使用JavaScript做WEB键盘事件侦听捕获时,主要采用onkeypress.onkeydown.onkeyup三个事件进行出来.该三个事件的执行顺序如下:onkeydown -> onk ...