JavaScript body.onload()和document.ready()函数的区别

body.onload()事件将在DOM和所有关联资源（如图片）加载完成后调用。基本上，当页面完全加载完成并包含所有图片、iframes和样式表等时，会调用onload()事件。

例如，如果我们的页面包含一张较大的图片，那么onload()事件会等待图片完全加载完成。

示例：

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <!-- using jquery library -->
    <script 
       src="https://code.jquery.com/jquery-git.js"> 
    </script> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
     
</head> 
  
<body onload="loadBody()"> 
    <h2>GeeksForGeeks</h2> 
  
    <script> 
       function loadBody(){ 
           alert("page loaded"); 
       } 
    </script> 
</body> 
  
</html>

输出：

JavaScript body.onload()和document.ready()函数的区别

document.ready() 函数会在DOM加载完毕时执行。它不会等待资源（如图片、脚本、对象、iframe等）加载完成。

我们的代码中可以有多个 document.ready() 函数，但只允许一个 body.onload() 函数。

示例：

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <!-- Using jquery library -->
    <script src="https://code.jquery.com/jquery-git.js"></script> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
     
</head> 
  
<body onload="loadBody()"> 
    <h2>GeeksForGeeks</h2> 
  
    <script> 
       $(document).ready(function(){ 
           alert("ready - page loaded") 
       }) 
    </script> 
</body> 
  
</html>

输出：

JavaScript body.onload()和document.ready()函数的区别

body.onload和document.ready之间的区别：

body.onload()	document.ready()
onload() 只有当所有内容都加载完成后才会被调用。	DOM加载完成后立即调用此函数。
它会等待所有资源（如图片、iframe、对象、脚本）加载完成。	DOM加载完成后调用一次。
我们只能有一个 body.onload() 函数。	我们的页面可以有多个 documents.ready() 函数。