JavaScript—页面加载及调整窗口大小_js 窗口大小-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_59715238/article/details/124836144

本文探讨JavaScript中页面加载的两个关键事件：'load'和'DOMContentLoaded'，以及如何监听窗口大小调整。'load'事件等待所有资源（如DOM、图片、CSS等）完全加载，而'DOMContentLoaded'事件仅在DOM结构构建完成后触发，不包括资源。此外，还讲解了窗口大小改变的处理方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.页面加载

load

load等页面内容全部加载完毕包括页面DOM元素、图片、css、flash等等

DOMContentLoaded

DOMContentLoaded 是DOM加载完毕，不包含图片 flash css 等就可以执行加载速度比load快一点

<script>
        window.addEventListener('load',function(){
            var btn=document.querySelector('button');
            btn.addEventListener('click',function(){
                alert('点击我');
            })
        })
        //load等页面内容全部加载完毕包括页面DOM元素、图片、css、flash等等
        //DOMContentLoaded 是DOM加载完毕，不包含图片 flash css 等就可以执行 加载速度比load快一点
        window.addEventListener('load',function(){
            alert('ww');
        })
        window.addEventListener('DOMContentLoaded',function(){
            alert(11);
        })
    </script>

2.调整窗口大小

    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <script>
        window.addEventListener('load',function(){
        //窗口大小发生变化
        var div=document.querySelector('div');
        window.addEventListener('resize',function(){
            console.log(window.innerWidth);

            console.log('变化了');
            if(window.innerWidth<=800){
                div.style.display='none';
            }else{
                div.style.display='block';
            }

        })
       }) 
    </script>
    <div></div>