window.onload在文檔加載完成后執行


 

驗證a 、b兩點疑惑:

a.<script src="./main.js"></script>中的window.onload是在html全部加載完了才執行,還是其在html中所處位置之前的加載完就執行?

b. <script src="./main.js"></script>中window.onload有和沒有 的區別是什么?

結論:

a.

answer:在html全部加載完了才執行。

b. 

answer:區別就是,window.onload是html頁面的所有文檔都加載完畢后,執行window.onload里的內容。因而加了window.onload的main.js不論在html的哪個位置引入,均不會出現html元素找不到的錯誤 。   沒有window.onload的js文件,需要在其所關聯html的那部分代碼后面引入,方可,否則,會出現html元素找不到的錯誤 。

以下為驗證全過程:

代碼結構預覽

 

main.js  :

window.onload=function(){

    var app=new Vue({

        el:"#app-4", 

        data:{

            todos:[{

                text:"first one"

            },{

                text:"second one"

            },{

                text:"third one"

            }]

        }

    })

    alert("app did!")

}

 

index.html  :

<html>

    <head>

        <title>xx</title>

        <script src="./vue.js"></script>

        <script src="./main.js"></script>

        <a href="./vue.js"></a>

    </head>

<body>

        <div id="app-4">

            <ol>

                <li v-for="todo in todos">{{todo.text}}</li>

            </ol>

        </div> 

    </body>

</html>

 

執行過程(按chrome中真實的執行順序羅列)

1.

 

2.

說明:是先走到main.js里的window.onload,之后再顯示出html的其余部分。

========================================================================================================

//現在將html的<script src="./main.js"></script>代碼位置稍作調整,為謹慎起見,增加一行<div>html中Dom的加載。。。</div>

index.html  :

<!DOCTYPE html>

<html>

    <head>

        <title>xx</title>

        <script src="./vue.js"></script>

       

        <a href="./vue.js"></a>

    </head>

    <body>

        <div>html中Dom的加載。。。</div>

        <div id="app-4">

            <ol>

                <li v-for="todo in todos">{{todo.text}}</li>

            </ol>

        </div>

        <script src="./main.js"></script>

    </body>

</html>

 

 

 

1.

 

 

2.

說明:有window.onload的main.js在哪里引入都一樣。【注意:均不會出現html元素找不到的錯誤

========================================================================= 

以上說述,是main.js中有window.onload時。

========================================================================= 

//                                                                現在,將window.onload去掉!!!

========================================================================= 

以下所述,是main.js中沒有window.onload時。

========================================================================= 

 

main.js  :

// window.onload=function(){ 

    var app=new Vue({

        el:"#app-4", 

        data:{

            todos:[{

                text:"first one"

            },{

                text:"second one"

            },{

                text:"third one"

            }]

        }

    })

    alert("app did!")

// }

 

index.html :

<!DOCTYPE html>

<html>

    <head>

        <title>xx</title>

        <script src="./vue.js"></script>

        <script src="./main.js"></script>

        <a href="./vue.js"></a>

</head>

    <body>

        <div>html中Dom的加載。。。</div>

        <div id="app-4">

            <ol>

                <li v-for="todo in todos">{{todo.text}}</li>

            </ol>

        </div>    

    </body>

</html>

 

 

1.

 

 

2.

 

 

說明:先加載的main.js中的內容,此時html並沒有加載完(后面需要顯示的內容還沒有加載)【注意:此時,出現html元素找不到的錯誤(2.圖)

 

=============================================================

//將index.html中的<script src="./main.js"></script>代碼位置稍作調整

index.html :

<!DOCTYPE html>

<html>

    <head>

        <title>xx</title>

        <script src="./vue.js"></script>

        <a href="./vue.js"></a>

    </head>

    <body>

        <div>html中Dom的加載。。。</div>

        <div id="app-4">

            <ol>

                <li v-for="todo in todos">{{todo.text}}</li>

            </ol>

        </div>

        <script src="./main.js"></script>       

    </body>

</html>

 

1.

 

2.

 

 

說明:html加載完(后面需要顯示的內容還沒有加載),之后加載main.js中的內容【此時,與有window.onload時的場景下,呈現順序一致

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2024 CODEPRJ.COM