jQuery 中的 $(window).load() 和 $(document).ready() 函式有什麼區別?


這兩種方法都用於 jQuery。讓我們看看它們的作用。

$(window).load()

包含在 $( window ).on( "load", function() { ... }) 內的程式碼僅在整個頁面準備好(不僅僅是 DOM)後才執行。

注意:load() 方法在 jQuery 1.8 版本中已棄用。在 3.0 版本中已完全移除。要檢視其工作原理,請在 3.0 之前的版本中新增 jQuery CDN。

$(document).ready()

ready() 方法用於在文件載入後使函式可用。你在 $( document ).ready() 方法中編寫的任何程式碼都將在頁面 DOM 準備好執行 JavaScript 程式碼後執行。

你可以嘗試執行以下程式碼來學習如何在 jQuery 中使用 $(document).ready()

線上演示

<html>

   <head>
      <title>jQuery Function</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

      <script>
         $(document).ready(function() {
           $("div").click(function() {
              alert("Hi!");
           });
         });
      </script>
   </head>
   
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

你可以嘗試執行以下程式碼來學習如何在 jQuery 中使用 $(window).load()

線上演示

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("img").load(function(){
      alert("Image successfully loaded.");
    });
});
</script>
</head>
<body>

<img src="/videotutorials/images/tutor_connect_home.jpg" alt="Tutor Connect" width="310" height="220">

<p><strong>Note:</strong> The load() method deprecated in jQuery version 1.8. It was completely removed in version 3.0. To see its working, add jQuery version for CDN before 3.0.</p>

</body>
</html>

更新於:2020年6月13日

3K+ 次檢視

啟動你的 職業生涯

完成課程獲得認證

開始學習
廣告