2. 程式人生 > >JS中的onload與jQuery中的ready區別

JS中的onload與jQuery中的ready區別

阿新 • • 發佈：2019-01-17

jQuery的執行機制（onload與ready的區別）

結論得出前自行測試: 為了測試是否真如所說的那樣，所以在頁面插入了20000張照片，照片數量少得不出什麼結論，所以改用console.log（）來測試，這樣一來我可以很好的看出在頁面最底端有沒有都加載出來，還有是打印出的結果的事件順序。


所用到的JS程式碼是：

console.time('name');   
 window.onload = function() {
            console.log('onload2');
            console.timeEnd('name');
}


一開始我是把console.timeEnd('name');放在onliad後面，onload是單獨區分開，但是出現的問題是顯示時間為0

 所以找出原因是，onload在頁面都執行完後，也就是標籤以及圖片都加載出來後才執行相應的JS程式碼，

執行測試後; onload在20000張照片的強大作用下耗時：30ms


Ready的測試：

所用到的JS程式碼是：

console.time('name');   
console.time('name');
    $(document).ready(function(){
console.log('ready1');console.timeEnd('name');
})


在執行ready的JQ程式碼時，Ready是在頁面還未都載入完成就顯示結果了，且時間是20ms

 

在測試時候我加入了兩個onload，這時候，還有加入兩個ready做測試，

window.onload = function() {
              console.log('onload1');
        }
window.onload = function() {
              console.log('onload2');
}

 
console.time('name');
           $(document).ready(function(){
              console.log('ready1');
       })
       console.time('name');
              $(document).ready(function(){
              console.log('ready2');
       })

顯示執行結果是：


可以看出，在基於前面的總結情況下，ready比onload先行輸出結果，也就是執行的機制不同，再來看，onload2輸出，onload1卻沒有輸出，可以看出，在編寫個數顯示出來的時候，ready支援編寫多個個數，而且是按照順序輸出的，而onload只支援一個，後者優先順序高選擇後者。

總結：

① 執行時機：

onload：在整個document文件（包括了載入圖片等其他資訊）載入完成後就可以直接對dom進行操作，比如一張圖片要等這個圖示載入完成之後才能設定圖片的寬高的屬性或樣式等； 

ready ：是在dom載入完成後就可以直接對dom進行操作，比如一張圖片只要<img>標籤完成，不用等這個圖片載入完成，就可以設定圖片的寬高的屬性或樣式等；

② 編寫個數：

 <script>
     window.onload = function() {
          alert(1);
     }
     window.onload = function() {       // 只彈出11
          alert(11);
     }
     $(document).ready(function() {    // 按照順序彈出 2  22 
          alert(2);
     });     
     $(document).ready(function() {
          alert(22);
     });     
  </script>

執行結果：彈出順序：  2--->22--->11
③ 簡寫

Window.onload 沒有簡寫形式

$(document).ready() 可以簡寫成$()

$()  ===   $(document).ready
 $(document).ready(function(){ alert(2);  }); 等價於：  $(function(){ alert(2);
   })

相關推薦

JS中的onload與jQuery中的ready區別

jQuery的執行機制（onload與ready的區別） 結論得出前自行測試: 為了測試是否真如所說的那樣，所以在頁面插入了20000張照片，照片數量少得不出什麼結論，所以改用console.log

js中onload和jQuery中的ready區別

沒有 dom 所有 出現 jquer 方法 點擊 div nload window.onload必須等到頁面內包括圖片的所有元素加載完畢後才能執行。 ------>不能寫多個（如果有多個，只會執行一個） $(document).ready()是DOM結構繪制完畢後

js中onload和jQuery中ready的區別

1、執行時間不同 window.onload必須等到頁面內包括圖片的所有元素載入完畢後才能執行。 $(document).ready()是DOM結構繪製完畢後就執行，不必等到載入完畢。 js程式

node與js與jquery中的each區別

art-template裡面用的語法是jQuery嗎， each什麼的 我暈了 each,forEach, 遍歷的全混了 art-template 和 jQuery 一毛錢關係都沒有 each 是 art-template 的模板語法，專屬的

js中的innerText、innerHTML、屬性值、value與jQuery中的text()、html()、屬性值、val()總結

att text color btn col class 屬性 fun value js與jQuery獲取text、html、屬性值、value的方法是不一樣的。 js與jQuery，text與innerText獲取(<!---->中為結果) html:

window.onload和JQuery中$(function(){})的區別即其實現原理

當前 blog 原理 image 改變 argument 原生js cti state 一、區別 window.onload是在DOM樹加載完成之後（DOM樹加載完不代表全部資源加載完，例如圖片，音頻和視頻等還沒加載）執行的。 在Jquery中$(function(){ }

Node.js中exports與module.exports的區別

個數 error: years 信息 輸出 一個數 mil 導出 原來 一、exports使用 test.js exports.name = function() { console.log(‘張三‘); }; index.js使用 var test= req

javaScript中的onclick與jquery中的click區別

mce 上下 要點 let 怎樣 報錯 ron n) 屬性 來來來，先看一個例子： html部分，定義幾個按鈕 <div class="carousel-btn"> <button class="btn"></button>

JavaScript中的onload和jQuery中的ready()

JavaScript中的window.onload和jQuery中的$(documemt).ready()的區別 之前剛學JavaScript的時候，在<script>標籤中的寫法都是window.onload = function( ) {

jquery中this與 this 的用法區別

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

node.js中exports與module.exports的區別分析

前言 關於Node.js中的exports和module.exports，很多時候都比較容易讓人混淆，弄不清楚兩者間的區別。那麼我們就從頭開始理清這兩者之間的關係。 來源 在開發Node.js應用的時候，很多模組都是需要引入才能使用，但是為什麼exports和module.exports我們沒有引用卻可

js中substring()與substr()方法的區別

在js中substring()與substr()，這兩個函式都存在，並且最後那個字母“s”都是小寫。 兩個功能差不多，但是有區別： 1.與 slice() 和 substr() 方法不同的是，substring() 不接受負的引數。 2.substr(index

node與ecma與jquery中的each區別

- art-template裡面用的語法是jQuery嗎， each什麼的 我暈了 each,forEach, 遍歷的全混了   + art-template 和 jQuery 一毛錢關係都沒有   + each 是 art-template 的模板語法，專屬的   +

jQuery中$.extend()與$.fn.extend()的區別

$.extend方法和$.fn.extend方法都可以用來擴充套件jQuery功能，通過閱讀jQuery原始碼我們可以發現這兩個方法的本質區別，那就是 $.extend方法是在jQuery全域性物件上擴充套件方法，$.fn.extend方法是在$選擇符選擇的jQuery物件

在jquery中 filter()與find()之間的區別

filter ()和find()函式是極其相似的，前者是應用於所有元素，而後者是僅應用於子元素。 簡單的說： filter()—通過所有的元素來搜尋。 find()—僅通過所有的子元素來搜尋。 具體的對比例項： <html> <head>

JS中typeof與instanceof之間的區別總結

JavaScript 中 typeof 和 instanceof 常用來判斷一個變數是否為空，或者是什麼型別的。但它們之間還是有區別的： typeof typeof 是一個一元運算，放在一個運算數之前，運算數可以是任意型別。 它返回值是一個字串，該字串說明

jquery中this與 this 的用法區別

就會 details this sdn title jquery對象 test dom 方法 jquery中this與$(this)的用法區別.先看以下代碼: $("#textbox").hover( function() { this.title = "Test"; },

js中onload與onunload妙用(轉載）

引言：今天週末沒事，就想起前面自己做的一個B2C的電子商務平臺，還有些一些地方沒有完善，就想著完善，嗯，問題是這樣的，在電子商務平臺中有這樣一個場景，我將購物車放置在Session中，使其在整個購物的過程中都能從Session中得到購物車模型，我在購物車某型中有的商品都會在資料庫中減少其購物車中購買的數量，

hibernate架構之session中get與load方法的區別

r.java one 升級版 數據庫 apache appenders 進行 方法 main hibernate是一個用於連接數據庫的升級版JDBC，與一般JDBC不同的是，hibernate架構是通過hql進行查找，通過session建立連接。其工作原理是：將實例分為瞬時

nodejs中exports與module.exports的區別

ons src uri 技術分享 20px boolean 微軟雅黑 是否 不一定 [原文] 你肯定非常熟悉nodejs模塊中的exports對象，你可以用它創建你的模塊。例如：（假設這是rocker.js文件）exports.name = function() {