css-在静态资源还没加载好的时候,显示一段静态文本

乖女子@@@

已于 2022-10-11 11:12:32 修改

阅读量156

点赞数

分类专栏： 2022_html+css # vue2 文章标签： css javascript vue.js

于 2021-04-18 11:08:52 首次发布

本文链接：https://blog.csdn.net/qq_43260366/article/details/115821731

版权

[1]在原生js中

原理：使用window.onload入口函数；
- 因为window.onload是等待所有静态资源加载完才会执行；
- 所以我们先将所有的元素隐藏，当静态资源加载完毕在显示；

代码

<style>
      #app {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="text">静态资源加载中</div>
    <div id="app">
      <a href="../03-居中问题.html" target="_parent">
        点击我进入剧中问题.html</a
      >
    </div>
    <script>
      window.onload = function () {
        // 当所有资源加载完毕的时候，将文本隐藏
        document.getElementById('text').style.display = 'none'
        document.getElementById('app').style.display = 'block'
      }
    </script>