分類  >  Web前端 >

(四)事件處理——(3)代碼執行的順序(Timing of code execution)

tags:    時間:2013-12-09 23:59:42
(4)事件處理——(3)代碼執行的順序(Timing of code execution)

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處理器),這兩種機制可以和平共處。

推薦閱讀文章

Bookmark the permalink ,來源:互聯網