页面加载完毕事件的使用方法

1. 原生js的页面加载完毕事件

window.onload = function(){
            
}

2. jquery的页面加载完毕事件

$(window).ready(function(){

})

上边代码可以简写为：

$(function(){

})

一般来说，简写的形式比较常见。

使用的话，建议使用Jquery的页面加载完毕事件，原因有下：

一、原生js的页面加载事件只能定义一个，如果定义了两个以上，后边的会将前边的给覆盖掉。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(window).ready(function(){
            console.log("jquery1");
        })
        $(window).ready(function(){
            console.log("jquery2");
        })

        window.onload = function(){
            console.log("js1");
        }
        window.onload = function(){
            console.log("js2");
        }
    </script>
</head>
<body>
    
</body>
</html>

效果如下，js的只被调用了一次。

二、原生的js页面完全加载完才会被执行，引入的js，加载的图片等都要等待其加载完毕。而jquery是页面的dom加载完就会被调用了。