jQuery中的read和JavaScript中的onload函數(shù)的區(qū)別
在JavaScript中，onload函數(shù)是最經(jīng)常使用的，幾乎涉及到JavaScript的童鞋都少不了要接觸它。這個函數(shù)的作用就是等待網(wǎng)頁完全裝載完了以后再去執(zhí)行代碼塊內(nèi)的語句，因為按照文檔流的執(zhí)行順序，通常用于頭部加載JavaScript的時候需要用到。
window.onload = function(){
// 當網(wǎng)頁加載完成后執(zhí)行這里的代碼塊
};
而在jQuery中也有一個對應(yīng)的函數(shù)，即等待網(wǎng)頁加載完后執(zhí)行代碼塊
$(document).ready(function(){
// 當網(wǎng)頁加載完成后執(zhí)行這里的代碼塊
});
以上這兩個看似一樣的功能，但實際有很大的區(qū)別。
onload不僅在創(chuàng)建DOM樹之后，而且在所有外部資源全部加載完畢，并且整個頁面在瀏覽器窗口中顯示完畢之后，才會執(zhí)行。這些資源不僅包括圖片資源，而且包括嵌入在頁面上的flash視頻，如果圖片或者flash過多，那么會一段很長加載時間，也就意味這延遲執(zhí)行代碼塊的時間會更多。
jQuery中的ready()方法只需要等待文檔結(jié)構(gòu)被完全解析并且瀏覽器已經(jīng)把HTML轉(zhuǎn)化為DOM樹后就會執(zhí)行代碼塊，這里注意的是僅僅是DOM，網(wǎng)頁中的圖片，flash等外部資源都毫無關(guān)聯(lián)。
由此可見jQuery中的ready()方法將縮短等待時間。
當然還有另外一種方式，就是把腳本都在<body>標簽后面，這樣的話網(wǎng)頁按照文檔流順序執(zhí)行，也會達到JavaScript中onload或者jQuery中ready()效果，并且這中方式將更快的展現(xiàn)網(wǎng)頁內(nèi)容。
- 用javascript實現(xiàn)jquery的document.ready功能的實現(xiàn)代碼
- JQuery的ready函數(shù)與JS的onload的區(qū)別詳解
- 模擬jQuery中的ready方法及實現(xiàn)按需加載css,js實例代碼
- JQuery的read函數(shù)與js的onload不同方式實現(xiàn)
- javascript 模擬JQuery的Ready方法實現(xiàn)并出現(xiàn)的問題
- JavaScript的jQuery庫中ready方法的學習教程
- 全面解析jQuery $(document).ready()和JavaScript onload事件
- jquery $(document).ready() 與window.onload的區(qū)別
- jQuery之$(document).ready()使用介紹
- jQuery的Read()方法代替原生JS詳解
相關(guān)文章
寫了簡單的跟隨鼠標移動效果。這個拖拽排序的效果的區(qū)別在于： 運用了插入insertBefore 和 insertAfter 的方法2011-09-09
jquery其實本身的事件機制就很完善了，包括了單擊，雙擊，鼠標移入，鼠標移出等。但是卻少了一個做事件。就是鼠標右擊事件。當然大家也是直接用偵聽鼠標按下事件，然后通過if來判斷執(zhí)行相應(yīng)的函數(shù)。造成鼠標右擊事件的效果2011-12-12
這篇文章主要介紹了jQuery中html()方法用法,以實例形式分析了html()方法的功能、定義及使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
基于jQuery和Bootstrap框架實現(xiàn)仿知乎前端動態(tài)列表效果
最近基于jQuery和Bootstrap框架實現(xiàn)了一個仿知乎動態(tài)列表的前端效果，基本實現(xiàn)了和知乎動態(tài)列表相同的效果，下面小編通過本文給大家分享實現(xiàn)思路及代碼，對bootstrap 實現(xiàn)仿知乎前端動態(tài)列表效果感興趣的朋友一起看看吧2016-11-11
jquery checkbox 勾選的bug問題解決方案與分析
本文首先由一個在項目中遇到的jquery checkbox 勾選的bug的解決方案，引申出jQuery中attr()和prop()的差異分析，非常的實用，需要的小伙伴快來研究下吧2014-11-11
jquery插件jbox使用iframe關(guān)閉問題
最近做需要用到彈出窗口，發(fā)現(xiàn)JBox不錯，可以支持iframe,但是發(fā)現(xiàn)個問題，在iframe中添加一個按鈕點擊此按鈕2009-02-02
jquery+css3實現(xiàn)的經(jīng)典彈出層效果示例
這篇文章主要介紹了jquery+css3實現(xiàn)的經(jīng)典彈出層效果,結(jié)合實例形式分析了jquery+css3實現(xiàn)彈出層具體原理、步驟與相關(guān)操作技巧,需要的朋友可以參考下2020-05-05
jQuery--遍歷操作實例小結(jié)【后代、同胞及過濾】
這篇文章主要介紹了jQuery 遍歷操作,結(jié)合實例形式詳細分析了jQuery針對后代、同胞及過濾遍歷的相關(guān)函數(shù)、操作技巧與使用注意事項,需要的朋友可以參考下2020-05-05
jQuery動畫_動力節(jié)點節(jié)點Java學院整理
用JavaScript手動實現(xiàn)動畫效果，需要編寫非常復(fù)雜的代碼。下面給分享jQuery內(nèi)置的幾種動畫樣式，需要的朋友參考下吧2017-07-07
BootStrap的table表頭固定tbody滾動的實例代碼
本文給大家分享一段關(guān)于BootStrap的table表頭固定tbody滾動的實例代碼,代碼簡單易懂，需要的朋友可以參考下2016-08-08