https://blog.csdn.net/qq_30682027/article/details/83858542

    根节点直接添加加载效果，在加载完成后删除加载节点

    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5.     <title>11111111</title>
    6.     <meta charset="utf-8" />
    7.     <meta http-equiv="pragma" content="no-cache">
    8.     <meta http-equiv="cache-control" content="no-cache">
    9.     <meta http-equiv="expires" content="0">
    10.     <meta name="referrer" content="no-referrer">
    11. </head>
    15. <body>
    16.     <div id="loading"
    17.     style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;">
    18.     <!-- 加载图片  -->
    19.         <img style="width: 100px; height: 100px;" src='.../'>
    20.     </div>
    22.     <div id="app"></div>
    23. </body>
    24. <script>
    25.     var root = document.getElementById('loading');
    26.     root.style.height = "100%";
    27.     console.log(document.readyState, 1111111111);
    28.     document.onreadystatechange = function () {
    29.         let string = document.readyState;
    30.         console.log(string, 'string');
    31.         if (string === 'complete') root.remove()
    32.     }
    33. </script>
    38. </html>