Jquery和js的页面加载完成执行的几种方式和区别

最新推荐文章于 2021-03-12 15:20:54 发布

menghuanzhiming

最新推荐文章于 2021-03-12 15:20:54 发布

阅读量946

点赞数 1

分类专栏： jquery js onload 文章标签： jquery js onload

js 同时被 3 个专栏收录

28 篇文章 1 订阅

订阅专栏

jquery

18 篇文章 0 订阅

订阅专栏

onload

1 篇文章 0 订阅

订阅专栏

`$(window).load()`、`window.onload=function(){}`和`$(document).ready()`（`$(function() {})`）的区别

1.执行时间

$(window).load() 是页面中的所有元素（包括图片、flash）等都加载完毕后，才能执行；

window.onload=function(){}  是页面中的所有元素（包括图片、flash）等都加载完毕后，才能执行；

$(document).ready()和$(function() {})  是DOM结构绘制完毕后就执行，不必等到加载完毕；

2.编写个数不同

 $(window).load() 多个，按顺序执行；

window.onload=function(){} 一个，最后一个执行，前面的都会覆盖；

$(document).ready()和$(function() {})  多个，按顺序执行；

测试代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="application/javascript" src="js/jquery.min.js"></script>
    <script type="application/javascript">
        $(document).ready(function() {
            alert("$(document)===1");
        });
        $(document).ready(function() {
            alert("$(document)===2");
        });

        $(window).load(function(){
            alert("onload1");
        });
        $(window).load(function(){
            alert("onload2");
        });



        window.onload = function() {
            alert("onload3");
        }
        window.onload = function() {
            alert("onload4");
        }
    </script>
    <body>
        <p>
            弹出结果：
            $(document)===1
            $(document)===2

            onload1
            onload2


            onload4
        </p>
    </body>
</html>

menghuanzhiming

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Jquery和js的页面加载完成执行的几种方式和区别

$(window).load()、window.onload=function(){}和$(document).ready()（$(function() {})）的区别1.执行时间$(window).load() 是页面中的所有元素（包括图片、flash）等都加载完毕后，才能执行；window.onload=function(){} 是页面中的所有元素（包括图片、flash）等都加载...
复制链接

扫一扫