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

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加载完就会被调用了。

posted @ 2019-12-10 15:28  发飙的蚂蚁  阅读(1283)  评论(0编辑  收藏  举报