Lorsque le site Web n'est pas chargé, l'écran d'affichage est en cours de chargement

Others 2020-03-11 22:09:12 views: null

Pour certains des projets web plus importants, un temps de chargement plus du site, il y aura des périodes de temps en noir et blanc, veulent laisser le savoir utilisateur que le site répond à un écran de chargement invites afin d'éviter la perte de trafic à la clientèle maintenant pour le vuedéveloppement du projet à titre d'exemple.

Avant cela, il y a espoir que les lecteurs découvrent vue, de préférence vue des échafaudages ont utilisé construit sur le projet.

Dans les projets Vue, seul un fichier html, nous recherchons est cela, le vue-cli3projet a généré, index.html dans un dossier public.

initialisation du fichier index.html est-ce

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

Ce qui <div id="app"></div>est toute application de saisie d'une seule page n'affiche les données sont chargées, cette fois aussi longtemps que par écrit ci - dessus sur le code HTML peut être chargé lorsque le site Web n'est pas terminée, d'écrire leur propre animation de chargement affiché, site chargé lorsque vous avez terminé, d'écrire leur propre code HTML pour supprimer, donc il faut savoir comment savoir que le site est chargé aussi bien.

Principalement l'utilisation de onreadystatechangel'événement, par exemple, regardez ce ajouté plus tard le code et les styles CSS h5

En <div id="app"></div>ajoutant ce qui précède

<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>  添加在上面 -->

Suivant le code de style CSS ci-dessus H5

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

Le code Enfin à noter est ici que cette partie du code à placer <head><head>dans, ne peut être placé <body><body>, car la seule façon dans cette partie du code sera <div id="app"></div>exécuté avant le chargement est terminé.

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

Eh bien, regardez cette partie principale du code

 
document.onreadystatechange = completeLoading;

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

onreadystatechangeCeci est un événement de ajax.

Lorsqu'une requête est envoyée au serveur, vous devrez peut - être parfois d'effectuer certains événements, à chaque fois que readyStatevous changez déclenché onreadystatechangel'événement.

document.readyStateDescription de la charge de l'état du document, il y a trois valeurs:

  • chargement / chargement
    • documents encore le chargement
  • interactive / interactive
    • Document a été résolu, « Chargement état final », mais comme des images, des feuilles de style, et le cadre sous-ressources comme le chargement de toujours.
  • complet / complété
    • Les documents et tous les sous-ressources ont terminé le chargement. Il représente loadl'état de l'événement est sur le point d'être déclenchée.

Lorsque cette propriété change, il déclenche l' onreadystatechangeévénement

Pour déterminer le chargement est terminé, vous pouvez laisser la minuterie RàZ et éléments de suppression utilisé pour afficher l'animation de chargement

Le code complet

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

Je suppose que tu aimes

Origine www.cnblogs.com/tourey-fatty/p/12465683.html
conseillé
Classement
du quotidien
Plus
2024-10-02(0)
2024-10-01(0)
2024-09-30(0)
2024-09-29(0)
2024-09-28(3)
2024-09-27(0)
2024-09-26(0)
2024-09-25(0)
2024-09-24(0)
2024-09-23(0)

Code World

© 2018 codetd.com