1. 程式人生 > >document.ready 與 onload 的區別

document.ready 與 onload 的區別

加載完成 fun define def china 標簽 區別 func 前端工程

摘要

document.ready 是指文檔加載好, dom 加載好,僅包含在它之前的 script 、css 標簽 , 但不包含 img 標簽是否加載完成, 因為頁面是按順序執行的。

onload 是指頁面完全加載好,包括所有節點,甚至 img 標簽

當然我們編碼一般都是把基礎庫放在head 頭部,保證最先加載,業務代碼放在最後,避免出現庫未加載完成的情況。

當然現在前端工程一般使用 webpack 等打包技術,在編譯打包過程中就完全實現了依賴項前置的功能。

測試

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>

<body onload="onload()">
    <img src="http://upload.chinaz.com/upimg/allimg/110630/0901070.jpg" />
    <script type="text/javascript" src="http://libs.cdnjs.net/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            console.log('document ready');
        });
    </script>
    <script type="text/javascript">
        console.log('haha');
    </script>
</body>

<script type="text/javascript">
function onload() {
    console.log('onload');
}
</script>
</html>
// 打印   
//haha
//document ready     
//onload
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>

<body onload="onload()">
    <img src="http://upload.chinaz.com/upimg/allimg/110630/0901070.jpg" />
    <script type="text/javascript">
        $(document).ready(function() {
            console.log('document ready');
        });
    </script>
    <script type="text/javascript">
        console.log('haha');
    </script>
    <script type="text/javascript" src="http://libs.cdnjs.net/jquery/3.2.1/jquery.min.js"></script>
</body>

<script type="text/javascript">
function onload() {
    console.log('onload');
}
</script>
</html>
//打印  
//$ undefined    
//haha   
//onload
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>

<body onload="onload()">
    <img src="http://upload.chinaz.com/upimg/allimg/110630/0901070.jpg" />

    <script type="text/javascript">
        console.log('haha');
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            console.log('document ready');
        });
    </script>
    <script type="text/javascript" src="http://libs.cdnjs.net/jquery/3.2.1/jquery.min.js"></script>

</body>

<script type="text/javascript">
function onload() {
    console.log('onload');
}
</script>
</html>
//打印  
//haha   
//$ undefined    
//onload

document.ready 與 onload 的區別