jQuery中ready與load事件的區別

前些天發現了一個巨牛的人工智能學習網站,通俗易懂,風趣幽默,忍不住分享一下給大家。點擊跳轉到教程。

jQuery中ready與load事件的區別

?

?

概述:

大家在工作中用jQuery的時候一定會在使用之前這樣:
1
2
3
4
5
6
7
8
//document ready
$(document).ready(function(){
????...code...
})
//document ready 簡寫
$(function(){
????...code...
})
有些時候也會這么寫:
1
2
3
4
//document load
$(document).load(function(){
????...code...
})
一個是ready一個是load,這兩個到底有什么區別呢?今天我們來聊一聊。

ready與load誰先執行:

大家在面試的過程中,經常會被問到一個問題:ready與load那一個先執行,那一個后執行?答案是ready先執行,load后執行。

DOM文檔加載的步驟:

要想理解為什么ready先執行,load后執行就要先聊一下DOM文檔加載的步驟:
1
2
3
4
5
6
(1) 解析HTML結構。
(2) 加載外部腳本和樣式表文件。
(3) 解析并執行腳本代碼。
(4) 構造HTML DOM模型。//ready
(5) 加載圖片等外部文件。
(6) 頁面加載完畢。//load
從上面的描述中大家應該已經理解了吧,ready在第(4)步完成之后就執行了。但是load要在第(6)步完成之后才執行。

ready事件:

ready事件在DOM結構繪制完成之后就繪執行。這樣能確保就算有大量的媒體文件沒加載出來,JS代碼一樣可以執行。

load事件:

load事件必須等到網頁中所有內容全部加載完畢之后才被執行。如果一個網頁中有大量的圖片的話,則就會出現這種情況:網頁文檔已經呈現出來,但由于網頁數據還沒有完全加載完畢,導致load事件不能夠即時被觸發。

總結:

相信大家已經了解了ready與load的區別,其實如果頁面中要是沒有圖片之類的媒體文件的話ready與load是差不多的,但是頁面中有文件就不一樣了,所以還是推薦大家在工作中用ready。

?

?

?

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

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

相關文章

網絡爬蟲--4.requests的簡單實用

文章目錄一.簡介二.基本GET請求1.最基本的GET請求--直接用get方法2.添加 headers 和查詢參數parmas3.通過requests獲取網絡上圖片的大小三.基本POST請求1.傳入data數據四.代理(proxies參數)五.私密代理六.web客戶端驗證七.Cookies 和 Sission1.Cookies2.…

編程各類資源大放送

小編的公眾號[編程軟文]一直在運營著,但是我的公眾號只是發一些技術類文章,沒有特地為自己的公眾號如何添粉去操作,目前公眾號關注度比較低。看著其他人的公眾號粉絲越來越多,小編也需要為自己做些事。為了提高自己公眾號的關注度…

使用Spring框架能帶來那些好處?

1、Dependency Injection(DI)方法使得構造器和JavaBean properties文件中的依賴關系一目了然。2、與EJB容器相比較,Ioc容器更加趨向于輕量級。這樣一來Ioc容器在郵箱的內存和CPU資源的情況下進行應用程序的開發和發布就變得十分有利。3、Spring并沒有閉門造車&#…

誰在告誰?移動專利混戰圖

移動領域激戰正酣,同樣是沒有永遠的朋友,只有永遠的利益。 蘋果剛剛起訴三星的Galaxy手機和平板電腦山寨了蘋果的產品,而此前兩家并沒有過節。再比如微軟和亞馬遜以及HTC之間的授權協議爭端。移動領域的爭端如此之多,以至于看客無…

java中list()和listfile()

File fnew File("c:\\");String[] f1f.list();File[] f2f.listFiles();① list() 返回一個字符串數組,這些字符串指定此抽象路徑名表示的目錄中的文件和目錄。 以C盤為例,返回的是c盤下文件夾名字的字符串數組,如[TEMP, Windows]②listFile…

光棍節程序員闖關秀過關全攻略

maven/java/web/bootstrapQQ群:566862629。希望更多人一起幫助我學習。 光棍節程序員闖關秀過關全攻略。程序員的寂寞誰能懂?"SF光棍節程序員闖關秀"智力挑戰小游戲火熱上線,看看你能闖到第幾關? 游戲地址: http://segmentfault…

jekins搭建

2019獨角獸企業重金招聘Python工程師標準>>> 轉自 https://www.cnblogs.com/hdwang/p/6081994.html ============&#xf…

網絡爬蟲--5.urllib庫的基本使用(1)

文章目錄一. 前言二. urlopen三. Request四. User-Agent五. 添加更多的Header信息1. 添加一個特定的header2. 隨機添加/修改User-Agent一. 前言 所謂網頁抓取,就是把URL地址中指定的網絡資源從網絡流中讀取出來,保存到本地。 在Python中有很多庫可以用來…

高性能計算

信息時代的硬件芯片和存儲器價格以摩爾定律的形式下降,可是現在處理的數據量也越來越大。我們先以cocoa編程為例,然后再結合網格計算、云計算,綜合對最新的高性能計算技術作介紹。 使用 runloop 在cocoa編程如果用NSThread開線程 [NSThread …

混合型面向對象語言和純面向對象語言

20世紀80年代以來,面向對象語言像雨后春筍一樣大量涌現,形成了兩大類面向對象語言。 一類是純面向對象語言,如Smalltalk和Eiffel等語言 另一類是混合型面向對象語言,也就是在過程語言的基礎上增加面向對象機制,如C等…

塊級元素的margin-left和margin-right的用法注意

此時是有效果顯示的因為html文檔流默認是從上往下,從左往右進行顯示的,所以此時是有效果的。那如果此時把#son的塊元素的margin-right:20px; 是沒有效果的此時是沒有效果的,如圖所示:如果此時想要margin-right有效果的話&#xf…

Apache Tiles的基本使用

前些天發現了一個巨牛的人工智能學習網站,通俗易懂,風趣幽默,忍不住分享一下給大家。點擊跳轉到教程。 1、概述 對于一個新的技術,了解其基本的概念和和原理是學好該技術的基礎。 2、Tiles的概念 Tiles 是復合視圖模式&#xff0…

js--------1.時間

1 //獲取當前時間 yyyy-MM-dd2 function getNowFormatDate() {3 var date new Date();4 var seperator1 "-";5 var seperator2 ":";6 var month date.getMonth() 1;7 var strDate date.getDate();8 if (month > 1 &&…

網絡爬蟲--6.urllib庫的基本使用(2)

文章目錄一. urllib.parse.urlencode()和urllib.parse.unquote()二. Get方式三. 批量爬取百度貼吧數據四.POST方式五.關于CA六.處理HTTPS請求 SSL證書驗證一. urllib.parse.urlencode()和urllib.parse.unquote() 編碼工作使用urllib.parse的urlencode()函數,幫我們…

面向對象語言的技術特點

1.支持類與對象概念的機制 所有面向對象語言都允許用戶動態創建對象,并且可以用指針引用動態創建的對象。允許動態創建對象,就意味著系統必須處理內存管理問題,如果不及時釋放不再需要的對象所占用的內存,動態存儲分配就有可能耗…

INI 文件的操作

在程序中經常要用到設置或者其他少量數據的存盤,以便程序在下一次執行的時候可以使用,比如說保存本次程序執行時窗口的位置、大小、一些用戶設置的數據等等,在 Dos 下編程的時候,我們一般自己產生一個文件,由自己把這些…

摩拜大數據殺熟?官方:老用戶押金的確退款延遲

近日,有媒體曝出摩拜單車一些老用戶出現押金難退現象。有的消費者點擊退款后,系統不斷奔潰;有的申請退款后,賬戶又莫名出現押金,就像未申請一樣;也有人終于提交了退款,等候數日卻遲遲不見到賬。…

Junit Test使用樣例

前些天發現了一個巨牛的人工智能學習網站,通俗易懂,風趣幽默,忍不住分享一下給大家。點擊跳轉到教程。 配置: 調用類: import java.util.List;import javax.annotation.Resource;import org.apache.shiro.crypto.Rand…

Django congtent types應用

contenttypes 是Django內置的一個應用,可以追蹤項目中所有app和model的對應關系,并記錄在ContentType表中。 每當我們創建了新的model并執行數據庫遷移后,ContentType表中就會自動新增一條記錄。比如我在應用app01的models.py中創建表class E…

網絡爬蟲--7.Handler處理器 和 自定義Opener

文章目錄一. 引言二. 簡單的自定義opener()三. ProxyHandler處理器(代理設置)四. Cookie1.Cookie原理2.Cookie應用五. cookiejar庫 和 HTTPCookieProcessor處理器1.案例一:獲取Cookie,并保存到CookieJar()對象中2.案例二:利用cook…