搜尋
首頁web前端前端問答JavaScript中onload和load的差別是什麼?

區別:load只是表示事件方法,但並未執行;onload表示載入完頁面所有東西以後才執行,在頁面只允許出現一個onload函數,因為它可編函數個數只有一個。 onload可能會有元素沒有載入完就執行,load等所有的元素載入完就執行。

JavaScript中onload和load的差別是什麼?

相關推薦:《jQuery影片教學

在寫互動的時候,載入函式使onload還是load呢?

趁機整理以防遺忘! !

js中window.onload(function)等價於jquery中$(window).onload(function)

一:window.load這個只是表明事件方法,但並未執行,例如hover、click表示事件,必須用上hover、onclick他才會執行

在頁面載入渲染的時候通常會有一個Loading效果,這時就可以用它了:

# JS:

              $(window).load(function(){
                $(".loadingicon").addClass("loader-chanage");
                $(".loadingicon").fadeOut(300,function(){
                  $(".loadingicon").remove();
                  $(".maker").show().animate({"right":"0"},500);
                });
              })

$(window).load(function)頁面當中的圖片和其他資源載入完成之後才會執行;

##二:window.onload 這個表示載入完頁面所有東西以後才執行,在頁面只允許出現一個onload函數,因為它可編函數個數只有一個:

JS:

nbsp;html>

    
        <meta>
        <title>demo float</title>
        
    
    
        <script>
            window.onload = function(){   alert("这是1");};
            window.onload = function(){   alert("这是2");};
        </script>
    
運行結果:

三:說完以上還有一個Jquery的$(document).ready(function),網頁中的所有DOM結構繪製完畢後就執行,可能DOM元素關聯的內容沒有載入完,例如圖片以及設定的相關高度寬度等,這時可以考慮jquery中的load方法規避;另外$(document).ready(function)可編寫函數不限,如:

nbsp;html>

    
        <meta>
        <title>demo float</title>
        <script></script>
    
    
        <script>
            $(document).ready(function(){     console.log("这是1");});
            $(document).ready(function(){     console.log("这是2");});
        </script>
    
#運行結果:


四、document

document.write(_LoadingHtml);
      
      //监听加载状态改变
      document.onreadystatechange = completeLoading;
       
      //加载状态为complete时移除loading效果
      function completeLoading() {
          if (document.readyState == "complete") {
              var loadingMask = document.getElementById('loadingp');
              loadingMask.parentNode.removeChild(loadingMask);
          }
      }
#最後總結一下:

js:window.onload頁面一執行就執行該函數,執行函數時,可能頁面中的圖片還沒有載入完成!

jquery: $(window).load()頁面中的圖片或其它東西載入完成之後,執行該函數。

呼叫load方法的完整格式是:load( url, [data], [callback] )參數分別為url位址、檔案類型(php、html等)、回呼函數,也支援選擇器載入load( "test.html #內容id名")

更多程式相關知識,請造訪:

程式設計教學! !

以上是JavaScript中onload和load的差別是什麼?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
CSS:我可以在同一DOM中使用多個ID嗎?CSS:我可以在同一DOM中使用多個ID嗎?May 14, 2025 am 12:20 AM

No,youshouldn'tusemultipleIDsinthesameDOM.1)IDsmustbeuniqueperHTMLspecification,andusingduplicatescancauseinconsistentbrowserbehavior.2)Useclassesforstylingmultipleelements,attributeselectorsfortargetingbyattributes,anddescendantselectorsforstructure

HTML5的目的:創建一個更強大,更容易訪問的網絡HTML5的目的:創建一個更強大,更容易訪問的網絡May 14, 2025 am 12:18 AM

html5aimstoenhancewebcapabilities,Makeitmoredynamic,互動,可及可訪問。 1)ITSupportsMultimediaElementsLikeAnd,消除innewingtheneedtheneedtheneedforplugins.2)SemanticeLelelemeneLementelementsimproveaCceccessibility inmproveAccessibility andcoderabilitile andcoderability.3)emply.3)lighteppoperable popperappoperable -poseive weepivewebappll

HTML5的重要目標:增強網絡開發和用戶體驗HTML5的重要目標:增強網絡開發和用戶體驗May 14, 2025 am 12:18 AM

html5aimstoenhancewebdevelopmentanduserexperiencethroughsemantstructure,多媒體綜合和performanceimprovements.1)SemanticeLementLike like,和ImproVereAdiability and ImproVereAdabilityActibility.2)and tagsallowsemlessallowseamelesseamlessallowseamelesseamlesseamelesseamemelessmultimedimeDiaiaembediiaembedplugins.3)。 3)3)

HTML5:安全嗎?HTML5:安全嗎?May 14, 2025 am 12:15 AM

html5isnotinerysecure,butitsfeaturescanleadtosecurityrisksifmissusedorimproperlyimplempled.1)usethesand andboxattributeIniframestoconoconoconoContoContoContoContoContoconToconToconToconToconToconTedContDedContentContentPrenerabilnerabilityLikeClickLickLickLickjAckJackJacking.2)

與較舊的HTML版本相比,HTML5目標與較舊的HTML版本相比,HTML5目標May 14, 2025 am 12:14 AM

HTML5aimedtoenhancewebdevelopmentbyintroducingsemanticelements,nativemultimediasupport,improvedformelements,andofflinecapabilities,contrastingwiththelimitationsofHTML4andXHTML.1)Itintroducedsemantictagslike,,,improvingstructureandSEO.2)Nativeaudioand

CSS:使用ID選擇器不好嗎?CSS:使用ID選擇器不好嗎?May 13, 2025 am 12:14 AM

使用ID選擇器在CSS中並非固有地不好,但應謹慎使用。 1)ID選擇器適用於唯一元素或JavaScript鉤子。 2)對於一般樣式,應使用類選擇器,因為它們更靈活和可維護。通過平衡ID和類的使用,可以實現更robust和efficient的CSS架構。

HTML5:2024年的目標HTML5:2024年的目標May 13, 2025 am 12:13 AM

html5'sgoalsin2024focusonrefinement和optimization,notNewFeatures.1)增強performanceandeffipedroptimizedRendering.2)inviveAccessibilitywithRefinedwithRefinedTributesAndEllements.3)explityconcerns,尤其是withercercern.4.4)

HTML5試圖改進的主要領域是什麼?HTML5試圖改進的主要領域是什麼?May 13, 2025 am 12:12 AM

html5aimedtotoimprovewebdevelopmentInfourKeyAreas:1)多中心供應,2)語義結構,3)formcapabilities.1)offlineandstorageoptions.1)html5intoryements html5introctosements introdements and toctosements and toctosements,簡化了inifyingmediaembedingmediabbeddingingandenhangingusexperience.2)newsements.2)

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。