时间戳

首页 > 解决方案 > 如何修改此 HTML JS 页面加载脚本以淡出白色背景和图标

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

问题描述

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

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

<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>

标签： javascripthtmlloadinggif

解决方案

您可以扩展您所拥有的内容并将加载程序放在覆盖容器中。

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) 在 HTML 中插入#loader2 #page-overlay) 将动画应用到$('#page-overlay')JS 中。这是一个小提琴概念：https ://jsfiddle.net/kyb4mezh/

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

推荐阅读