(4)事件处理——(3)代码执行的顺序(Timing of code execution)
来源:互联网 发布:网络用语sos是什么意思 编辑:程序博客网 时间:2024/05/08 16:03
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操纵了。这对我们写有特色的代码而不用担心加载顺序这一点是一个福利。
另一方面,使用$(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.
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.
- (4)事件处理——(3)代码执行的顺序(Timing of code execution)
- (4)事件处理——(5)为代码简洁做的快捷方式(Shortcuts for code brevity)
- Java中四大代码块的执行顺序(附code)
- Procedural Timing Control (of Verilog HDL)
- Page_Load、事件处理函数(如RowCommand事件处理函数)、Page_PreRender执行顺序(总结)
- 执行上下文(Execution Context)
- Unity3D开发小贴士(十八)各种事件的执行顺序
- Salesforce事务执行顺序(Triggers and Order of Execution)
- 【unity】【Code】【Event事件】通用代码库(三)——Unity事件与委托
- Alignment of Code (代码对齐)UVA1593
- Java面试系列(一):代码的执行顺序
- 【Unity】MonoBehavior事件函数的执行顺序(监听调用顺序)
- 按钮的几个事件处理顺序(OnTouch,OnClick)
- Java基础-代码执行顺序(重要)
- M/R推测性的执行(Speculative execution)
- sql server execution plan - 执行计划的诡异 ( 一 )
- sql server execution plan - 执行计划的诡异 ( 二 )
- Execution of Paladin 圣骑士的斩杀(省赛~模拟)
- MYSQL常用命令
- 你是否真的会用C语言逐行读取文本文件中的串?(请不要栽倒在诡异的feof上)
- (4)事件处理——(1)事件处理(Handling Events)
- hql 语法与详细解释
- (4)事件处理——(2)在页面加载的时候执行任务(Performing tasks on page load)
- (4)事件处理——(3)代码执行的顺序(Timing of code execution)
- 2013.9优酷 数据挖掘 笔试一面
- void usart_config(u32 BaudRate)
- [Usaco2009 Feb]Revamping Trails 堆优化 Dijkstra
- Mahout协同过滤算法源码分析(6)--并行思路
- Linux网络流量实时监控工具-ifstat
- 安装SQL体验
- 静态方法
- hdu 4352 数位+状压