[03]Web前端进阶—JS页面加载后执行事件

原创已于 2023-04-21 22:16:03 修改 · 1.9k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html #学习 #开发语言

于 2022-08-25 13:11:23 首次发布

本文探讨Web前端中页面加载后执行JavaScript的两个关键事件：DOMContentLoaded和onload。DOMContentLoaded事件在DOM加载并解析完成后执行JS，不等待图片和CSS等资源；而onload事件则在所有资源包括图片、CSS等加载完毕后才执行JS。通过实例展示了这两个事件的区别。

本文偏基础

文章目录

前言

除了观看script标签的：点我看[02]Web前端进阶—script标签
还有单独的html页面里面写js代码的问题，js在什么时候运行最好
页面加载完毕主要有两个事件:

"DOMContentLoaded"事件：页面的DOM加载并解析完毕之后触发JS代码，不会等待图片,css等资源的加载。
“onload事件”：页面所有资源加载完毕时触发JS代码。

代码和结果展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码展示</title>
</head>
<body>
    <h1>我是普通h1</h1>
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1212%2F2258%2F2258-ntk39124.jpg&refer=http%3A%2F%2Fimg2.niutuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663995139&t=b43a6b8ee2fd0baeef0f8bed229377e7" alt="我是图片">
   <script>
    window.addEventListener('DOMContentLoaded',function(){
        console.log("我最开始就执行了")
    })
    window.addEventListener('load',function(){
        console.log("我还要等图片加载完才可以执行")
    })
   </script>
</body>
</html>