JavaScript中onload和load有哪些區(qū)別

小編給大家分享一下JavaScript中onload和load有哪些區(qū)別，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)公司自2013年創(chuàng)立以來，先為來鳳等服務(wù)建站，來鳳等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為來鳳企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

區(qū)別：load只是表明事件方法，但并未執(zhí)行；onload表示加載完頁面所有東西以后才執(zhí)行，在頁面只允許出現(xiàn)一個onload函數(shù)，因為它可編函數(shù)個數(shù)只有一個。onload可能會有元素沒有加載完就執(zhí)行，load等所有的元素加載完后才執(zhí)行。

在寫交互的時候，加載函數(shù)使onload還是load呢？

趁機整理以防遺忘??！

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

一：window.load這個只是表明事件方法，但并未執(zhí)行，比如hover、click表示事件，必須用上hover、onclick他才會執(zhí)行

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

JS：

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

$(window).load(function)頁面當(dāng)中的圖片和其他資源加載完成之后才會執(zhí)行；

二：window.onload 這個表示加載完頁面所有東西以后才執(zhí)行，在頁面只允許出現(xiàn)一個onload函數(shù)，因為它可編函數(shù)個數(shù)只有一個：

JS：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>demo float</title>
        
    </head>
    <body>
        <script type="text/javascript">
            window.onload = function(){   alert("這是1");};
            window.onload = function(){   alert("這是2");};
        </script>
    </body>
</html>

運行結(jié)果：

JavaScript中onload和load有哪些區(qū)別

三：說完以上還有一個Jquery的$(document).ready(function),網(wǎng)頁中的所有DOM結(jié)構(gòu)繪制完畢后就執(zhí)行，可能DOM元素關(guān)聯(lián)的內(nèi)容沒有加載完，例如圖片以及設(shè)置的相關(guān)高度寬度等，這時可以考慮jquery中的load方法規(guī)避;另外$(document).ready(function)可編寫函數(shù)不限，如：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>demo float</title>
        <script type="text/javascript" src="http://static.ruilife.net/static/js/jquery-1.9.1.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            $(document).ready(function(){     console.log("這是1");});
            $(document).ready(function(){     console.log("這是2");});
        </script>
    </body>
</html>

運行結(jié)果：

JavaScript中onload和load有哪些區(qū)別

四、document

document.write(_LoadingHtml);
      
      //監(jiān)聽加載狀態(tài)改變
      document.onreadystatechange = completeLoading;
       
      //加載狀態(tài)為complete時移除loading效果
      function completeLoading() {
          if (document.readyState == "complete") {
              var loadingMask = document.getElementById('loadingp');
              loadingMask.parentNode.removeChild(loadingMask);
          }
      }

最后總結(jié)一下：

js:window.onload頁面一運行就執(zhí)行該函數(shù)，執(zhí)行該函數(shù)時，可能頁面中的圖片還沒有加載完成！

jquery： $(window).load()頁面中的圖片或其它東西加載完成之后，執(zhí)行該函數(shù)。

調(diào)用load方法的完整格式是：load( url, [data], [callback] )參數(shù)分別url地址、文件類型（php、html等）、回調(diào)函數(shù)，也支持選擇器加載load("test.html #內(nèi)容id名")

看完了這篇文章，相信你對JavaScript中onload和load有哪些區(qū)別有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

本文題目：JavaScript中onload和load有哪些區(qū)別
轉(zhuǎn)載源于：http://bm7419.com/article34/igdgse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、ChatGPT、企業(yè)網(wǎng)站制作、品牌網(wǎng)站制作、云服務(wù)器、移動網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

手機網(wǎng)站建設(shè)