CSS3动画优化首屏加载白屏

最新推荐文章于 2025-03-13 00:05:17 发布

。Idea

最新推荐文章于 2025-03-13 00:05:17 发布

阅读量233

点赞数

文章标签： css3 css 动画

本文链接：https://blog.youkuaiyun.com/weixin_46672437/article/details/130345800

版权

本文探讨了如何通过CSS3动画优化首屏加载，避免出现白屏现象。关键在于正确处理加载元素，如在跟组件挂载完成后及时移除loader元素。

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./src/assets/css/loader.css">
</head>
<script>
  window.removeLoader = () => {
    let loader= document.getElementById("loader-wrapper");
    loader&&loader.remove();
  }
</script>

<body>
  <div id="root"></div>
  <!-- 白屏加载动画 -->
  <div id="loader-wrapper">
    <div id="loader"></div>
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>