JavaScript中onload和load的差別是什麼？-前端問答-PHP中文網

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

青灯夜游

發布： 2023-01-04 09:37:08

原創

3876 人瀏覽過

區別：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：

<!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>

登入後複製

運行結果：

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

<!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>

登入後複製

#運行結果：

四、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中文網其他相關文章！