如何修改此 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">

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

</div>

CSS

#loader { 

  width: 70px; 

  height: 70px; 

} 

.center { 

  background: #fff;

  position:fixed;

  top: 0; 

  bottom: 0; 

  left: 0; 

  right: 0; 

  margin: auto; 

} 

js

document.onreadystatechange = function() { 

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

    document.querySelector( 

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

    $('#page-overlay').animate({opacity: 0}, 1000);

    

    document.querySelector( 

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

  } else { 

   document.querySelector( 

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

    document.querySelector( 

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

  } 

}; 

所以基本上1）插入#loaderHTML #page-overlay2）应用动画而不是$('#page-overlay')JS。这是一个小提琴概念：https://jsfiddle.net/kyb4mezh/

这将使页面有效地过渡。您甚至可以更进一步，向加载容器添加固定的不透明度。