jquery $(document).ready() 與window.onload的區別

轉載博客:http://www.jb51.net/article/21628.htm

Jquery中$(document).ready()的作用類似于傳統JavaScript中的window.onload方法,不過與window.onload方法還是有區別的。

1.執行時間?

????????window.onload必須等到頁面內包括圖片的所有元素加載完畢后才能執行。?
????????$(document).ready()是DOM結構繪制完畢后就執行,不必等到加載完畢。?

2.編寫個數不同?

???????? window.onload不能同時編寫多個,如果有多個window.onload方法,只會執行一個?
???????? $(document).ready()可以同時編寫多個,并且都可以得到執行?

3.簡化寫法?

???????? window.onload沒有簡化寫法?
???????? $(document).ready(function(){})可以簡寫成$(function(){});

在我以前的開發中,一般用到javascript,我都是采用jquery的模式,也就是大多數時候,第一行寫的是:

$(document).ready(function(){
...
});

這個時候,不一定要等所有的js和圖片加載完畢,就可以執行一些方法,不過有些時候,必須要等所有的元素都加載完畢,才可以執行一些方法的時候,比如說,部分圖片或者什么其他方面還沒有加載好,這個時候,點擊某些按鈕,會導致出現意外的情況,這個時候,就需要用到:

$(window).load(function() {
$("#btn-upload").click(function(){   //比如說:
 uploadPhotos();
});
});

下面是轉載的內容,
用$(window).load(function(){...})而不用body.onload()的幾個理由
首先它們都是在頁面所有元素(包括html標簽以及引用到得所有圖片,Flash等媒體)加載完畢后執行的,這是它們的共同點.

不用body.Onload()理由1:

如果我們想同時加載多個函數,我們必須這樣寫

<body οnlοad="fn1(),fn2()"></body>看起來極其丑陋,如果用$(window).load()我們可以這樣加載多個函數

 $(window).load(function() {alert("hello,我是jQuery!");});$(window).load(function() {alert("hello,我也是jQuery");});

這樣寫它會從上往下執行這兩個函數,并且看起來漂亮多了.

不用body.Onload()理由2:

用body.Onload()不能夠做到js和html完全分離,這是一個很嚴重的問題.

另外用$(window).load(function(){...})和body.onload()都存在同樣一個問題,因為開始也說到了,它們都需要等到頁面的所有內容

加載完畢才執行,但是如果當網速比較慢的時候,加載一個頁面往往需要較長的時間(幾秒到十幾秒不等,甚至更長...),所以我們經常

會遇到頁面還沒有完全加載完畢而用戶已經在操作頁面了這種情況,這樣頁面表現出來的效果就跟我們預期的效果不一樣了,

所以在這里我推薦使用$(document).ready(function(){}),或簡寫為$(function(){}),因為他會在頁面的dom元素加載完畢后就執行,

而無需等到圖片或其他媒體下載完畢.

但是有時候確實我們有需要等到頁面的所有東西都加載完后再執行我們想執行的函數,所以是該使用$(window).load(function(){...})還是

該使用$(function(){})往往需要結合具體需要而作不同的選擇.

最后附上一段在所有DOM元素加載之前執行的jQuery代碼

<script type="text/javascript">
(function() {alert("DOM還沒加載哦!");})(jQuery)</script>

呵呵,有時候我們也有這個需求!

以瀏覽器裝載文檔為例,在頁面加載完畢后,瀏覽器會通過 Javascript 為 DOM 元素添加事件。在常規的 Javascript 代碼中,通常使用 window.onload 方法,而在 Jquery 中,使用的是 $(document).ready() 方法。 $(document).ready() 方法是事件模塊中最重要一個函數,可以極大的提高 Web 應用程序的速度。

?window.load? $(document).ready() ?

執行時機? 必須等待網頁中所有的內容加載完畢后 ( 包括圖片 ) 才能執行? 網頁中所有 DOM 結構繪制完畢后就執行,可以能 DOM 元素關聯的內容并沒有加載完??
編寫個數? 不能同時編寫多個?
以下代碼無法正確執行:?

window.onload = function(){ alert(“text1”); 
}; 
window.onload = function(){ alert(“text2”); 
};

結果只輸出第二個? 能同時編寫多個?
以下代碼正確執行:

$(document).ready(function(){ alert(“Hello World”); 
}); 
$(document).ready(function(){ alert(“Hello again”); 
}); 

結果兩次都輸出??
簡化寫法? 無?

$(function(){ // do something 
}); 

另外,需要注意一點,由于在 $(document).ready() 方法內注冊的事件,只要 DOM 就緒就會被執行,因此可能此時元素的關聯文件未下載完。例如與圖片有關的 html 下載完畢,并且已經解析為 DOM 樹了,但很有可能圖片還沒有加載完畢,所以例如圖片的高度和寬度這樣的屬性此時不一定有效。要解決這個問題,可以使用 Jquery 中另一個關于頁面加載的方法 ---load() 方法。 Load() 方法會在元素的 onload 事件中綁定一個處理函數。如果處理函數綁定給 window 對象,則會在所有內容 ( 包括窗口、框架、對象和圖像等 ) 加載完畢后觸發,如果處理函數綁定在元素上,則會在元素的內容加載完畢后觸發。?
Jquery 代碼如下:?

$(window).load(function (){ // 編寫代碼  
});等價于 JavaScript 中的以下代碼 
Window.onload = function (){ // 編寫代碼 
}

?最近在改一個嵌入在frame中的頁面的時候,使用了jquery做效果,而頁面本身也綁定了onload事件。改完后,Firefox下測試正常流暢,IE下就要等個十幾秒jquery的效果才出現,黃花菜都涼了。

  起初以為是和本身onload加載的方法沖突。網上普遍的說法是$(document).ready()是在頁面DOM解析完成后執行,而onload事件是在所有資源都準備完成之后才執行,也就是說$(document).ready()是要在onload之前執行的,尤其當頁面圖片較大較多的時候,這個時間差可能更大。可是我這頁面分明是圖片都顯示出來十幾秒了,還不見jquery的效果出來。

  刪了onload加載的方法試試,結果還是一樣,看來沒有必要把原本的onload事件綁定也改用$(document).ready()來寫。那是什么原因使得Firefox正常而IE就能呢?接著調試,發現IE下原來綁定的onload方法竟然先于$(document).ready()的內容執行,而Firefox則是先執行$(document).ready()的內容,再執行原來的onload方法。這個和網上的說法似乎不完全一致啊,呵呵,有點意思,好像越來越接近真相了。

  翻翻jquery的源碼看看$(document).ready()是如何實現的吧:

if ( jQuery.browser.msie && window == top ) (function(){ 
if (jQuery.isReady) return; 
try { 
document.documentElement.doScroll("left"); 
} catch( error ) { setTimeout( arguments.callee, 0 ); return; } // and execute any waiting functions 
   jQuery.ready(); 
})(); 
jQuery.event.add( window, "load", jQuery.ready );

結果很明了了,IE只有在頁面不是嵌入frame中的情況下才和Firefox等一樣,先執行$(document).ready()的內容,再執行原來的onload方法。對于嵌入frame中的頁面,也只是綁定在load事件上執行,所以自然是在原來的onload綁定的方法執行之后才輪到。而這個頁面中正好在測試環境下有一個訪問不到的資源,那十幾秒的延遲正是它放大出的時間差。

以上就是本文的全部內容,了解更多jQuery的語法,大家可以查看:《jQuery 1.10.3 在線手冊》,也希望大家多多支持腳本之家。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/396644.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/396644.shtml
英文地址,請注明出處:http://en.pswp.cn/news/396644.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

小學三年級上冊計算機計劃,小學三年級數學上冊教學計劃

小學三年級數學上冊教學計劃一、班級情況分析這一學期我繼續擔任三年級數學教學工作&#xff0c;本班現有學生9人&#xff0c;其中男生3人&#xff0c;女生6人。三年級學生已經有兩年的數學學習經歷&#xff0c;對一些基礎性的數學知識有了初步的認識。學生已經比較習慣于新教材…

centos7查看當前cpu運行模式_雜集:centos7中設置服務開機自啟的兩種方法,歡迎補充...

前言&#xff1a;在日常使用linux系統過程中&#xff0c;安裝服務后系統不會自動啟動服務的。就算手動啟動了服務&#xff0c;只是當前生效&#xff0c;一旦服務器重啟后&#xff0c;系統不會自動啟動這些服務。如果每次重啟服務器都要自己手動啟動這些服務&#xff0c;一臺還闊…

Sort HDU5884(二分+多叉哈夫曼樹)

HDU5884 Sort 題意&#xff1a;有n個序列要進行歸并&#xff0c;每次歸并的代價是兩個序列的長度的和&#xff0c;要求最終的代價不能超過規定的T&#xff0c;求在此前提下一次能同時進行歸并的序列的個數k。 思路&#xff1a;還是太單純&#xff0c;看完題目一直以為要用歸并排…

python來源是什么_python起源?為什么使用python?直至愛上python的五個理由

原標題&#xff1a;python起源&#xff1f;為什么使用python&#xff1f;直至愛上python的五個理由Python的創始人&#xff0c;吉多范羅蘇姆&#xff0c;是一名荷蘭計算機程序員&#xff0c;他作為 Python 程序設計語言的作者而為人們熟知。在 Python 社區&#xff0c;吉多范羅…

Linux系統(五)負載均衡LVS集群之DR模式

序言 DR模式是lvs集群中三種負載均衡模式的其中一種&#xff0c;那么上一篇中我寫啦關于NAT模式的搭建與原理&#xff0c;為什么還要有DR模式與IP隧道模式呢&#xff1f; 首先我們來看3張圖。LVS/NAT模式如下圖&#xff1a; LVS/IP隧道模式&#xff0c;如下圖&#xff1a; LVS/…

Redux API之applyMiddleware

applyMiddleware(...middlewares) 使用包含自定義功能的 middleware 來擴展 Redux 是一種推薦的方式。Middleware 可以讓你包裝 store 的dispatch 方法來達到你想要的目的。同時&#xff0c; middleware 還擁有“可組合”這一關鍵特性。多個 middleware 可以被組合到一起使用&a…

計算機2018創業方向,推薦2018年創業的方向

原標題&#xff1a;推薦2018年創業的方向1 新電商傳統的零售業收到互聯網電商的重沖擊&#xff0c;從而進行線上線下的結合是必然的趨勢&#xff0c;新零售&#xff0c;新電商&#xff0c;是幾千萬零售企業成功轉型的必然之路&#xff0c;學習一套全面的新電商轉型的方法&#…

包無法安裝_詳細教程 | 安裝Python編程環境以及使用OpenpyXl操作Excel

詳細教程 | 安裝Python編程環境以及使用OpenpyXl操作Excel注意&#xff1a;下列教程為 Windows7 64位&#xff1b;Windows 10有部分步驟有差異&#xff0c;請參考使用&#xff01;01 下載Python程序安裝包首先前往Python官網 www.python.org,進入官網點擊 Downloads,然后點擊 W…

Activity、Fragment、Dialog基類簡單整理

版權聲明&#xff1a;本文為HaiyuKing原創文章&#xff0c;轉載請注明出處&#xff01; 概述 這里簡單記錄下Activity、Fragment、Dialog基類中的常規寫法&#xff0c;后續根據項目需求進行相應的擴展。 BaseActivity.java package com.why.project.myapptemplet.activity;impo…

request重定向_golang不想http自動處理重定向的解決方案

前言有時候發送http請求不想讓庫自動幫忙處理重定向&#xff0c;庫里面默認的是會把所有重定向都完成一遍&#xff0c;結果就是最后一個沒有重定向的請求的結果。因此需要一種方案直接獲取首次訪問的結果&#xff0c;不走重定向。go的http庫里面是使用如下代碼檢查重定向的&…

C語言項目開發-項目架構和編程命名規范

一個項目的流程&#xff1a;1、公司市場人員與客戶交流&#xff0c;了解客戶、引導客戶使用公司最優資源并產出一份市場需求文檔 2、公司需求人員&#xff08;BA&#xff09;與客戶交流&#xff0c;了解客戶需求并產出一個軟件需求文檔 3、項目經理、開發小組成員、需求人員&am…

ajax登錄驗證的原理,ajax用戶登錄驗證-get和post提交方式,與工作原理—2018-8-15...

ajax用戶登錄驗證&#xff1a;實例html>Ajax實戰:表單驗證用戶登錄郵箱: 密碼: 提交let btn document.getElementsByTagName(button)[0];btn.onclick function () {//1.創建xhr對象let xhr new XMLHttpRequest();//2.監聽響應狀態xhr.onreadystatechange function(){// …

將Python腳本打包成可執行文件

Python是一個腳本語言&#xff0c;被解釋器解釋執行。它的發布方式&#xff1a; .py文件&#xff1a;對于開源項目或者源碼沒那么重要的&#xff0c;直接提供源碼&#xff0c;需要使用者自行安裝Python并且安裝依賴的各種庫。&#xff08;Python官方的各種安裝包就是這樣做的&a…

float foo=42e1為什么錯_為什么重寫了equals()也要重寫hashCode()

小Hub領讀&#xff1a;雖然是很基礎的一篇文章&#xff0c;但是對于equals、hashcode兩個方法&#xff0c;相信很多人都與其中的規則不熟悉&#xff0c;來跟著小Hub花個8分鐘回顧一下&#xff01;作者&#xff1a;不學無數的程序員https://my.oschina.net/u/4030990/blog/31341…

ssh客戶端_一款基于TAS框架的SSH客戶端蠕蟲

TEA是一款基于TAS框架的SSH客戶端蠕蟲&#xff0c;從本質上說&#xff0c;它是一個仿冒的SSH客戶端&#xff0c;它能夠修改tty輸入/輸出來實現任意命令執行&#xff0c;或通過SSH連接來上傳自身以實現滲透感染。為了實現該工具的正常功能&#xff0c;遠程主機需要滿足以下條件&…

Selenium入門11 滾動條控制(通過js)

這一節要有js基礎。做web端的UI自動化必須要有html&#xff0c;css&#xff0c;javascript前端基礎。 滾動條控制&#xff1a; 1 移動垂直滾動條 document.documentElement.scrollTop 2 移動垂直滾動條 document.documentElement.scrollLeft 3 找到某個元素&#xff0c;移動到可…

Qt之QNetworkInterface

簡述 QNetworkInterface類負責提供主機的IP地址和網絡接口的列表。 QNetworkInterface表示了當前程序正在運行時與主機綁定的一個網絡接口。每個網絡接口可能包含0個或多個IP地址&#xff0c;每個IP地址都可選擇性地與一個子網掩碼和/或一個廣播地址相關聯。這樣的列表可以通過…

第二周計劃

上周計劃回顧 3.5 ~ 3.11 數據&#xff1a; 評師網爬取&#xff0c;完成&#xff1a;2k條記錄 finished后端 數據結構 技術選型 學校API封裝未完成&#xff1a;后端負責人出差 工作暫停產品 功能設計&#xff1a;主要功能提交&#xff1a;原型圖 幾個頁面 每個頁面大概功能完成…

python編程軟件排行榜_PYPL 9月編程語言排行榜發布 Python一枝獨秀

開發者可以將 PYPL 作為一個參考&#xff0c;決定學習何種語言或 IDE&#xff0c;或者在新的軟件項目中使用何種語言或數據庫。9 月份的榜單如下&#xff1a;前五名分別是 Python、Java、JavaScript、C# 與 PHP。相比去年 9 月份的數據&#xff0c;除了 Python 大幅上漲了 4.5%…

分享到系統面板_win7電腦沒有nvidia控制面板怎么辦【解決方法】

我們在使用電腦的時候&#xff0c;當電腦顯卡出現問題導致屏幕畫面不清晰時&#xff0c;可以使用win7系統自帶nvidia控制面板&#xff0c;它能夠對顯卡進行設置&#xff0c;提升顯卡功能&#xff0c;不過很多電腦用戶點擊nvidia控制面板時卻提示nvidia顯示設置不可用&#xff0…