加载背景后的加载屏幕

Question

我试图在后台加载 js 中的加载事件后制作一个简单的加载页面，它只是一个原型，可以在我的学校项目中采用这个想法并使其变得更好，有什么解决方案可以解决这个问题？或建议更好的闪屏？我使用 animate.css 动画库代码：

    <html>

       <head>
        <title>Animate</title>
        <link rel='stylesheet' href="animate.css-master/animate.min.css">
        <style>
            .div1
        {
            width: 100%;
            height: 100%;
            background-image: url(2.jpg) ;
            background-size:cover;
         position: absolute;

            } 

            .div2
           {
            width: 100%;
            height: 100%;
            background-color: lightblue;
               position: absolute;
               z-index: 1;
            }
            .Loading
            {
                text-align: center;
                margin-top: 20%;
            }



           </style>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js"></script>
       <script type="text/javascript">
        function hide()
           {
    $(function(){
         $('.div2').hide()
          });
           }

           </script>
    </head>
<body>
       <div class="div1" onload="hide()">
    <!--soma data-->
    <img src="1.png" width="100%" height="100%;" style="position: absolute">
    <img src="1.png" width="100%" height="100%;" style="position: absolute">

    </div>
      <!--loading div-->
        <div class="div2" style="overflow: hidden;">
            <div class='loading animated infinite flip'>
                           <div>===========</div>

                <span class='animated infinite fadeInDown' >L</span>
                <span class='animated infinite fadeInDown' style='animation-delay:0.1s;'>O</span>
                <span class='animated infinite fadeInDown' style='animation-delay:0.2s;'>A</span>
                <span class='animated infinite fadeInDown' style='animation-delay:0.3s;'>D</span>
                <span class='animated infinite fadeInDown' style='animation-delay:0.4s;'>I</span>
                <span class='animated infinite fadeInDown' style='animation-delay:0.5s;'>N</span>
                <span class='animated infinite fadeInDown' style='animation-delay:0.6s;'>G</span>
                <div>===========</div>
            </div>
        </div>

Answer 1

也许你想要下面这样的东西。问题是 onload 不是 div.

上的事件

onload = function(){
         hide();
       }
function hide() {
  $('.div2').hide()
}

.div1 {
  width: 100%;
  height: 100%;
  background-image: url(https://loremflickr.com/1000/400);
  background-size: cover;
  position: absolute;
}

.div2 {
  width: 100%;
  height: 100%;
  background-color: lightblue;
  position: absolute;
  z-index: 1;
}

.Loading {
  text-align: center;
  margin-top: 20%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<div class="div1" >
  <!--soma data-->
  <img src="https://loremflickr.com/1020/740" width="100%" height="100%;" style="position: absolute">
  <img src="https://loremflickr.com/1020/740" width="100%" height="100%;" style="position: absolute">

</div>
<!--loading div-->
<div class="div2" style="overflow: hidden;">
  <div class='loading animated infinite flip'>
    <div>===========</div>

    <span class='animated infinite fadeInDown'>L</span>
    <span class='animated infinite fadeInDown' style='animation-delay:0.1s;'>O</span>
    <span class='animated infinite fadeInDown' style='animation-delay:0.2s;'>A</span>
    <span class='animated infinite fadeInDown' style='animation-delay:0.3s;'>D</span>
    <span class='animated infinite fadeInDown' style='animation-delay:0.4s;'>I</span>
    <span class='animated infinite fadeInDown' style='animation-delay:0.5s;'>N</span>
    <span class='animated infinite fadeInDown' style='animation-delay:0.6s;'>G</span>
    <div>===========</div>
  </div>
</div>

加载背景后的加载屏幕

loading screen after the background is loaded

javascript

jquery

animate.css