加载背景后的加载屏幕答案

【问题标题】：loading screen after the background is loaded加载背景后的加载屏幕
【发布时间】：2018-03-25 15:47:34
【问题描述】：

我试图在后台加载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>

【问题讨论】：

标签： javascript jquery animate.css

【解决方案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>

【讨论】：

我不明白这个'onload=hide;'请你解释一下吗？
onload 是在页面完成下载所有内容时调用的函数 & onload = hide 意味着我们绑定了在加载完成时调用的隐藏函数。 w3schools.com/jsref/event_onload.asp
顺便说一句，这是我在回答中举例说明的你想要的功能吗？
我理解，但 'onload = hide;'它可能对我的代码没有任何意义 document.getElementByClassName('div1').onload = function(){hide();} 这就是你的意思吗？
请在此处阅读developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/… div 没有 onload 事件。当页面下载文档中请求的所有内容时，将调用给定代码中的 onload