代码之家  ›  专栏  ›  技术社区  ›  aguywithquestions

微调器加载动画页面加载后不会消失

  •  0
  • aguywithquestions  · 技术社区  · 3 年前

    我正在测试这个简单的加载动画,当页面加载时,页面应该显示出来,或者在这种情况下,一个视频。问题是,尽管页面/视频已经加载,但动画仍会一直持续。视频正在youtube上嵌入。 这是密码

    注意:Youtube video ID就是一个例子,它不会引导任何地方,但视频会加载

    HTML

    <div class = "loadelement"><span class = "spinner"> </span></div> 
       <iframe width = "100%" height = "530"
       src = "https://youtube.com/embed/EXAMPLE" title="Youtube video player "
        frameborder = "0" allow = "accelerometer; autoplay ; clipboard-write ; encrypted-media ; gyroscope ; picture-in-picture" allowfullscreen>
    </iframe>
    

    CSS

    .loadelement {
    position : absolute ; top : 0 ; left : 0 ; 
    height: 100vh ; width: 100%;
    background: #fff ; display : flex ; 
    align-items : center ; justify-content : center ; 
    
    
    }
    
    .spinner {
    
    width : 80px ; height : 80px ; 
    border : 8px solid #f3f3f3 ; 
    border-radius : 50% ; 
    border-top : 8px solid #01101a ;
    animation: spin 2s linear infinite;
    }
    
    @keyframes spin {
    0% {
     transform: rotate(0deg);
    }
    100% {
        transform : rotate(360deg);
    }
    

    }

    Javascript

    let loaderel = document.querySelector(".loadelement");
    window.addEventListener("load", function() {
    loaderel.style.display = "None";
    });
    

    我一直试图自己解决这个问题,任何帮助都会非常大。谢谢大家。

    1 回复  |  直到 3 年前
        1
  •  1
  •   Oliver Cape    3 年前

    你的代码似乎有效。但你可以尝试添加 onload 归因于你的 iframe 隐藏加载程序时 iframe 已加载。

    另外,我还将选择器更改为ID,并为loader元素添加了一个ID,因为页面上可能有多个loader。

    function hideLoader() {
      const loaderel = document.querySelector("#loader");
      loaderel.style.display = "none";
    }
    
    /*
    * Below also works if you don't want the iframe onload attribute
    *
    
    const loaderel = document.querySelector("#loader");
    window.addEventListener("load", function() {
      loaderel.style.display = "none";
    });
    
    *
    */
    .loadelement {
      position: absolute;
      top: 0;
      left: 0;
      height: 100vh;
      width: 100%;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .spinner {
      width: 80px;
      height: 80px;
      border: 8px solid #f3f3f3;
      border-radius: 50%;
      border-top: 8px solid #01101a;
      animation: spin 2s linear infinite;
    }
    
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    <div id="loader" class="loadelement"><span class="spinner"></span></div>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/K4TOrB7at0Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen onload="hideLoader()"></iframe>