在JavaScript中，onload函數(shù)是最經(jīng)常使用的，幾乎涉及到JavaScript的童鞋都少不了要接觸它。這個(gè)函數(shù)的作用就是等待網(wǎng)頁(yè)完全裝載完了以后再去執(zhí)行代碼塊內(nèi)的語(yǔ)句，因?yàn)榘凑瘴臋n流的執(zhí)行順序，通常用于頭部加載JavaScript的時(shí)候需要用到。

復(fù)制代碼代碼如下:

window.onload = function(){

    // 當(dāng)網(wǎng)頁(yè)加載完成后執(zhí)行這里的代碼塊

};

而在jQuery中也有一個(gè)對(duì)應(yīng)的函數(shù)，即等待網(wǎng)頁(yè)加載完后執(zhí)行代碼塊

復(fù)制代碼代碼如下:

$(document).ready(function(){

    // 當(dāng)網(wǎng)頁(yè)加載完成后執(zhí)行這里的代碼塊     

});

以上這兩個(gè)看似一樣的功能，但實(shí)際有很大的區(qū)別。

onload不僅在創(chuàng)建DOM樹之后，而且在所有外部資源全部加載完畢，并且整個(gè)頁(yè)面在瀏覽器窗口中顯示完畢之后，才會(huì)執(zhí)行。這些資源不僅包括圖片資源，而且包括嵌入在頁(yè)面上的flash視頻，如果圖片或者flash過多，那么會(huì)一段很長(zhǎng)加載時(shí)間，也就意味這延遲執(zhí)行代碼塊的時(shí)間會(huì)更多。

jQuery中的ready()方法只需要等待文檔結(jié)構(gòu)被完全解析并且瀏覽器已經(jīng)把HTML轉(zhuǎn)化為DOM樹后就會(huì)執(zhí)行代碼塊，這里注意的是僅僅是DOM，網(wǎng)頁(yè)中的圖片，flash等外部資源都毫無關(guān)聯(lián)。

由此可見jQuery中的ready()方法將縮短等待時(shí)間。

當(dāng)然還有另外一種方式，就是把腳本都在<body>標(biāo)簽后面，這樣的話網(wǎng)頁(yè)按照文檔流順序執(zhí)行，也會(huì)達(dá)到JavaScript中onload或者jQuery中ready()效果，并且這中方式將更快的展現(xiàn)網(wǎng)頁(yè)內(nèi)容。

您可能感興趣的文章:

相關(guān)文章

JQuery入門基礎(chǔ)小實(shí)例(1)
這篇文章主要講述了一個(gè)JQuery入門基礎(chǔ)小實(shí)例，實(shí)現(xiàn)的過程效果都很簡(jiǎn)單，特別適合初學(xué)者來學(xué)習(xí)，感興趣的小伙伴們可以參考一下
2015-09-09
jQuery 取值、賦值的基本方法整理
這篇文章主要介紹了jQuery 取值、賦值的基本方法,需要的朋友可以參考下
2014-03-03
jQuery 自動(dòng)增長(zhǎng)的文本輸入框?qū)崿F(xiàn)代碼
文本輸入框內(nèi)的字?jǐn)?shù)不能確定，而input type="text"的size是固定的，當(dāng)字?jǐn)?shù)超過size時(shí)（默認(rèn)是20），先輸入的內(nèi)容就會(huì)從文本框的左端隱藏起來，不便于輸入。
2010-04-04
基于Jquery easyui 選中特定的tab
這篇文章主要介紹了基于Jquery easyui 選中特定的tab的相關(guān)資料,需要的朋友可以參考下
2015-11-11
jQuery插件FusionCharts繪制2D柱狀圖和折線圖的組合圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制2D柱狀圖和折線圖的組合圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用插件FusionCharts載入xml格式數(shù)據(jù)繪制柱狀圖與折線圖組合圖效果的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-04-04
jquery實(shí)現(xiàn)div陰影效果示例代碼
div陰影效果在以前都是采用圖片來實(shí)現(xiàn)的，而在本文大家將學(xué)會(huì)使用jquery來實(shí)現(xiàn)，感興趣的朋友可以參考下
2013-09-09
jQuery 點(diǎn)擊獲取驗(yàn)證碼按鈕及倒計(jì)時(shí)功能
驗(yàn)證碼倒計(jì)時(shí)功能，在前端開發(fā)中經(jīng)常會(huì)遇到，下面小編給大家?guī)砹薺Query 點(diǎn)擊獲取驗(yàn)證碼按鈕及倒計(jì)時(shí)功能，感興趣的朋友跟隨小編一起看看吧
2018-09-09
IE7瀏覽器窗口大小改變事件執(zhí)行多次bug及IE6/IE7/IE8下resize問題
通過本篇文章主要給大家介紹IE7瀏覽器窗口大小改變事件執(zhí)行多次bug及IE6/IE7/IE8下resize問題，需要的朋友可以一起來學(xué)習(xí)
2015-08-08
jquery驗(yàn)證郵箱格式是否正確實(shí)例講解
這篇文章主要介紹了一個(gè)jquery驗(yàn)證郵箱格式是否正確的實(shí)踐案例，利用正則表達(dá)式進(jìn)行驗(yàn)證，感興趣的小伙伴們可以參考一下
2015-11-11
jQuery實(shí)現(xiàn)頁(yè)碼跳轉(zhuǎn)式動(dòng)態(tài)數(shù)據(jù)分頁(yè)
本片文章教給大家用jQuery實(shí)現(xiàn)頁(yè)碼跳轉(zhuǎn)式動(dòng)態(tài)數(shù)據(jù)分頁(yè)，效果非常好而且沒有頁(yè)面刷新，需要的朋友學(xué)習(xí)下吧。
2017-12-12