Webサイトがロードされていない場合は、表示画面がロードされています

大規模Webプロジェクト、サイトの長いロード時間のいくつかのために、そこには、顧客のトラフィックの損失を回避するために、ロード画面のプロンプトに、ユーザーがWebサイトが応答であることを知らせたい、黒と白の時間の長さを変えることになります今するために、vue一例として、プロジェクト開発。

これに先立ち、読者がVUEを知ることを望み、好ましくVUE中古足場は、プロジェクトの上に構築されているがあります。

VUEのプロジェクトでは、唯一のhtmlファイル、我々はこのために探している、vue-cli3プロジェクトはindex.htmlのパブリックフォルダに、生成されました。

index.htmlファイルの初期化はこれです

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, viewport-fit=cover" >
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
   
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

どの<div id="app"></div>データのみが表示されます全体の単一ページの入力アプリケーションがロードされ、長いWebサイトが完了していないときに、独自のローディングアニメーションを書くために、ロードすることができるHTMLコードにその上に書かれたように表示、ロードされたウェブサイトのように、この時間終了したら、出て削除するには、独自のHTMLコードを書くために、そのサイトも同様にロードされていることを知っている方法を知っておく必要がありますが。

主の使用onreadystatechangeイベント、たとえば、これを見て後から追加されたコードとCSSスタイルH5

では<div id="app"></div>上記の追加

<div id="loading">
    <div class="div" style="animation: myAnima 1s infinite">
        <div class="div1"></div>
        <div class="small-black">
            <div class="very-small-white"></div>
        </div>
        <div class="small-white">
            <div class="very-small-black"></div>
        </div>
    </div>
    <div class="progress-box margin-top">
        <div class="progress"></div>
    </div>
    <p class="p margin-top">正在玩命加载</p>
</div>
    <!-- <div id="app"></div>  添加在上面 -->

次は、H5上記のCSSスタイルのコードです

<style>
    #loading{
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    #loading .div{
        width: 160px;
        height: 160px;
        background-color: #000000;
        position: relative;
        border-radius: 50%;

        transform: rotate(10deg);
    }

    #loading .div .div1{
        width: 80px;
        height: 160px;
        background-color: #ffffff;
        border-radius: 80px 0 0 80px;
    }
    #loading .div .small-black{
        position: absolute;
        bottom: 0;
        left: 40px;
        width: 80px;
        height: 80px;
        background-color: #000000;
        border-radius: 50%;

    }

    #loading .div .small-white{
        position: absolute;
        top: 0;
        left: 40px;
        width: 80px;
        height: 80px;
        background-color: #ffffff;
        border-radius: 50%;
    }
    #loading .div .small-black .very-small-white{
        position: absolute;
        top: 25px;
        left: 25px;
        width: 30px;
        height: 30px;
        background-color: #ffffff;
        border-radius: 50%;
    }
    #loading .div .small-white .very-small-black{
        position: absolute;
        top: 25px;
        left: 25px;
        width: 30px;
        height: 30px;
        background-color: #000000;
        border-radius: 50%;
    }

    #loading .margin-top{
        margin-top: 20px;
    }

    #loading .progress-box{
        width: 300px;
        height: 20px;
        border: 1px solid #ababab;
        position: relative;
    }
    #loading .progress-box .progress{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        background-color: #1989fa;
        width: 0;
    }
    @keyframes myAnima{
        0% {transform: rotate(0deg)}
        10% {transform: rotate(36deg)}
        20% {transform: rotate(72deg)}
        30% {transform: rotate(108deg)}
        40% {transform: rotate(144deg)}
        50% {transform: rotate(180deg)}
        60% {transform: rotate(216deg)}
        70% {transform: rotate(252deg)}
        80% {transform: rotate(288deg)}
        90% {transform: rotate(324deg)}
        100% {transform: rotate(360deg)}
    }
</style>

最後に、ノートへのjsのコードは、ここでは、コードのこの部分を配置することで<head><head>、中に配置することはできません<body><body>コードのこの部分での唯一の方法はされますので、<div id="app"></div>読み込みが完了する前に実行します。

<script>

    let time = null; // 接收定时器返回的标识
    
    //这个函数用于进度条的变化和文字的变化
    function loop(){

        let num = parseInt(Math.random()*100);
        const progress = document.querySelector('.progress');

        progress.style.width = num + '%';

        const p = document.querySelector('.p');
        p.innerText = '正在玩命加载' + num + '%';

    }
    
    //定时器
    if(!time){
        time = setInterval(()=>{
            loop();
        }, 100);
    }

    document.onreadystatechange = completeLoading;
    
    
    function completeLoading() {
        if (document.readyState == "complete") {
            clearInterval(time);
            time = null;

            const loading = document.querySelector('#loading');
            loading.remove();
        }
    }
</script>

さて、このコードの主要な部分を見て

 
document.onreadystatechange = completeLoading;

function completeLoading() {
    if (document.readyState == "complete") {
        clearInterval(time);
        time = null;
        
     
        const loading = document.querySelector('#loading');
        loading.remove();   //删除元素
    }
}

onreadystatechangeこれは、Ajaxのイベントです。

要求がサーバーに送信されるといつでも、あなたは時々、いくつかのイベントを実行する必要がありreadyStateますがトリガ変更onreadystatechangeイベントを。

document.readyState文書の負荷状態の説明、3つの値があります。

ロード/ロード
- ドキュメントはまだロード
インタラクティブ/インタラクティブ
- 文書は「解決されたロード」終了状態が、そのような画像、スタイルシート、およびまだロードのようなサブリソースフレームワークとして。
/完全な完成
- ドキュメントとすべてのサブリソースが完成ロードを持っています。彼は表しloadイベントの状態がトリガーされようとしています。

このプロパティを変更すると、それが引き金となりonreadystatechange、イベントを

ロードを決定することが完了したら、読み込みのアニメーションを表示するために使用されるタイマカウンタクリア、および削除の要素をさせることができます

完全なコード

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, viewport-fit=cover" >
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <style>
      #loading{
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }

      #loading .div{
        width: 160px;
        height: 160px;
        background-color: #000000;
        position: relative;
        border-radius: 50%;

        transform: rotate(10deg);
      }

      #loading .div .div1{
        width: 80px;
        height: 160px;
        background-color: #ffffff;
        border-radius: 80px 0 0 80px;
      }
      #loading .div .small-black{
        position: absolute;
        bottom: 0;
        left: 40px;
        width: 80px;
        height: 80px;
        background-color: #000000;
        border-radius: 50%;
        
      }

      #loading .div .small-white{
        position: absolute;
        top: 0;
        left: 40px;
        width: 80px;
        height: 80px;
        background-color: #ffffff;
        border-radius: 50%;
      }
      #loading .div .small-black .very-small-white{
        position: absolute;
        top: 25px;
        left: 25px;
        width: 30px;
        height: 30px;
        background-color: #ffffff;
        border-radius: 50%;
      }
      #loading .div .small-white .very-small-black{
        position: absolute;
        top: 25px;
        left: 25px;
        width: 30px;
        height: 30px;
        background-color: #000000;
        border-radius: 50%;
      }

      #loading .margin-top{
        margin-top: 20px;
      }

      #loading .progress-box{
        width: 300px;
        height: 20px;
        border: 1px solid #ababab;
        position: relative;
      }
      #loading .progress-box .progress{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        background-color: #1989fa;
        width: 0;
      }
      @keyframes myAnima{
          0% {transform: rotate(0deg)}
          10% {transform: rotate(36deg)}
          20% {transform: rotate(72deg)}
          30% {transform: rotate(108deg)}
          40% {transform: rotate(144deg)}
          50% {transform: rotate(180deg)}
          60% {transform: rotate(216deg)}
          70% {transform: rotate(252deg)}
          80% {transform: rotate(288deg)}
          90% {transform: rotate(324deg)}
          100% {transform: rotate(360deg)}
      }
    </style>
    <script>

      let time = null;
      
    
      

      function loop(){

        let num = parseInt(Math.random()*100);
        const progress = document.querySelector('.progress');

        progress.style.width = num + '%';

        const p = document.querySelector('.p');
        p.innerText = '正在玩命加载' + num + '%';
       
      }

      if(!time){
        time = setInterval(()=>{
          loop();
        }, 100);
      }
      
      document.onreadystatechange = completeLoading;

      function completeLoading() {
          if (document.readyState == "complete") {
              clearInterval(time);
              time = null;

              const loading = document.querySelector('#loading');
              loading.remove();
          }
      }
    </script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="loading">
      <div class="div" style="animation: myAnima 1s infinite">
        <div class="div1"></div>
        <div class="small-black">
          <div class="very-small-white"></div>
        </div>
        <div class="small-white">
          <div class="very-small-black"></div>
        </div>
      </div>
      <div class="progress-box margin-top">
        <div class="progress"></div>
      </div>
      <p class="p margin-top">正在玩命加载</p>
    </div>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Webサイトがロードされていない場合は、表示画面がロードされています

おすすめ