如何修改此 HTML JS 页面加载脚本以淡出白色背景和图标

Question

我已经实现了这个加载图标，该图标运行良好并且出现在页面中央，这很好。我添加了一个额外的脚本来淡出图标，而不是突然改变图标，这效果很好，但白色背景的变化仍然非常突然。

我想知道如何更改以下脚本以允许白色背景淡出到页面内容和图标。

<style>

#loader { 

            

            width: 70px; 

            height: 70px; 

        } 

          

        .center { 

            background: #fff;

            position:fixed;

            top: 0; 

            bottom: 0; 

            left: 0; 

            right: 0; 

            margin: auto; 

        } 

</style>

<div id="loader" class="center"> <i class="fa fa-spinner fa-5x fa-spin" style="color:#118F5E"></i></div>

<script> 

        document.onreadystatechange = function() { 

            if (document.readyState !== "complete") { 

                document.querySelector( 

                  "body").style.visibility = "hidden"; 

                $('#loader').animate({opacity: 0}, 1000);

                document.querySelector( 

                  "#loader").style.visibility = "visible";

                

            } else { 

                document.querySelector( 

                  "#loader").style.display = "none"; 

                document.querySelector( 

                  "body").style.visibility = "visible"; 

            } 

        }; 

    </script>

Answer 1

您可以扩展您所拥有的内容，并将加载程序放入覆盖容器内。html<div id="page-overlay" class="center">&nbsp; <div id="loader" class="center"> <i class="fa fa-spinner fa-5x fa-spin" style="color:#118F5E"></i></div></div>CSS#loader {&nbsp;&nbsp; width: 70px;&nbsp;&nbsp; height: 70px;&nbsp;}&nbsp;.center {&nbsp;&nbsp; background: #fff;&nbsp; position:fixed;&nbsp; top: 0;&nbsp;&nbsp; bottom: 0;&nbsp;&nbsp; left: 0;&nbsp;&nbsp; right: 0;&nbsp;&nbsp; margin: auto;&nbsp;}&nbsp;jsdocument.onreadystatechange = function() {&nbsp;&nbsp; if (document.readyState !== "complete") {&nbsp;&nbsp; &nbsp; document.querySelector(&nbsp;&nbsp; &nbsp; &nbsp; "body").style.visibility = "hidden";&nbsp;&nbsp; &nbsp; $('#page-overlay').animate({opacity: 0}, 1000);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; document.querySelector(&nbsp;&nbsp; &nbsp; &nbsp; "#loader").style.visibility = "visible";&nbsp; } else {&nbsp;&nbsp; &nbsp;document.querySelector(&nbsp;&nbsp; &nbsp; &nbsp; "#loader").style.display = "none";&nbsp; &nbsp; document.querySelector(&nbsp;&nbsp; &nbsp; &nbsp; "body").style.visibility = "visible";&nbsp;&nbsp; }&nbsp;};&nbsp;所以基本上1）插入#loaderHTML&nbsp;#page-overlay2）应用动画而不是$('#page-overlay')JS。这是一个小提琴概念：https://jsfiddle.net/kyb4mezh/这将使页面有效地过渡。您甚至可以更进一步，向加载容器添加固定的不透明度。