Comment afficher un écran de chargement pendant le chargement du contenu du site

StackOverflow https://stackoverflow.com/questions/244183

Question

Je travaille sur un site contenant de nombreux fichiers MP3 et images, et j'aimerais afficher un gif de chargement pendant le chargement de tout le contenu.

Je ne sais pas comment y parvenir, mais j'ai le gif animé que je veux utiliser.

Des suggestions?

Était-ce utile?

La solution

Généralement, les sites le font en chargeant du contenu via ajax et en écoutant l'événement readystatechanged pour mettre à jour le DOM avec un GIF de chargement ou le contenu.

Comment chargez-vous actuellement votre contenu?

Le code ressemblerait à ceci: 

function load(url) {
    // display loading image here...
    document.getElementById('loadingImg').visible = true;
    // request your data...
    var req = new XMLHttpRequest();
    req.open("POST", url, true);

    req.onreadystatechange = function () {
        if (req.readyState == 4 && req.status == 200) {
            // content is loaded...hide the gif and display the content...
            if (req.responseText) {
                document.getElementById('content').innerHTML = req.responseText;
                document.getElementById('loadingImg').visible = false;
            }
        }
    };
    request.send(vars);
}

De nombreuses bibliothèques javascript tierces peuvent vous faciliter la vie, mais ce qui précède est vraiment tout ce dont vous avez besoin.

Autres conseils

Vous avez dit que vous ne vouliez pas faire cela dans AJAX. Même si AJAX est idéal pour cela, il existe un moyen de montrer une DIV en attendant le chargement complet de <body>. Cela ressemble à ceci: 

<html>
  <head>
    <style media="screen" type="text/css">
      .layer1_class { position: absolute; z-index: 1; top: 100px; left: 0px; visibility: visible; }
      .layer2_class { position: absolute; z-index: 2; top: 10px; left: 10px; visibility: hidden }
    </style>
    <script>
      function downLoad(){
        if (document.all){
            document.all["layer1"].style.visibility="hidden";
            document.all["layer2"].style.visibility="visible";
        } else if (document.getElementById){
            node = document.getElementById("layer1").style.visibility='hidden';
            node = document.getElementById("layer2").style.visibility='visible';
        }
      }
    </script>
  </head>
  <body onload="downLoad()">
    <div id="layer1" class="layer1_class">
      <table width="100%">
        <tr>
          <td align="center"><strong><em>Please wait while this page is loading...</em></strong></p></td>
        </tr>
      </table>
    </div>
    <div id="layer2" class="layer2_class">
        <script type="text/javascript">
                alert('Just holding things up here.  While you are reading this, the body of the page is not loading and the onload event is being delayed');
        </script>
        Final content.      
    </div>
  </body>
</html>

L'événement onload ne se déclenchera que lorsque toute la page aura été chargée. Ainsi, la couche 2 <DIV> ne sera affichée qu'une fois le chargement de la page terminé, après quoi le chargement se déclenchera.

Que diriez-vous de jQuery? Un simple ... 

$(window).load(function() {      //Do the code in the {}s when the window has loaded 
  $("#loader").fadeOut("fast");  //Fade out the #loader div
});

Et le code HTML ... 

<div id="loader"></div>

Et CSS ... 

#loader {
      width: 100%;
      height: 100%;
      background-color: white;
      margin: 0;
}

Ensuite, dans votre chargeur div, vous placerez le GIF, ainsi que le texte que vous souhaitez, et il disparaîtra une fois la page chargée.

Tout d’abord, configurez une image de chargement dans un div. Ensuite, récupérez l'élément div. Ensuite, définissez une fonction qui édite le fichier CSS pour que la visibilité soit & "Hidden &"; Dans <body>, placez le onload sur le nom de la fonction.

Méthode #Pure css

  

Placez ceci en haut de votre code (avant la balise d'en-tête) 

<style> .loader {
  position: fixed;
  background-color: #FFF;
  opacity: 1;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}
</style>
<div class="loader">
  Your Content For Load Screen
</div>

  

Et ceci en bas après tout autre code (sauf le tag / html) 

<style>
.loader {
    -webkit-animation: load-out 1s;
    animation: load-out 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes load-out {
    from {
        top: 0;
        opacity: 1;
    }

    to {
        top: 100%;
        opacity: 0;
    }
}

@keyframes load-out {
    from {
        top: 0;
        opacity: 1;
    }

    to {
        top: 100%;
        opacity: 0;
    }
}
</style>

  
    

Cela fonctionne toujours pour moi 100% du temps

  

Il existe en fait un moyen assez simple de le faire. Le code devrait être quelque chose comme: 

<script type="test/javascript">

    function showcontent(x){

      if(window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      }

      xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState == 1) {
            document.getElementById('content').innerHTML = "<img src='loading.gif' />";
        }
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          document.getElementById('content').innerHTML = xmlhttp.responseText;
        } 
      }

      xmlhttp.open('POST', x+'.html', true);
      xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
      xmlhttp.send(null);

    }

Et dans le code HTML: 

<body onload="showcontent(main)"> <!-- onload optional -->
<div id="content"><img src="loading.gif"></div> <!-- leave img out if not onload -->
</body>

J'ai fait quelque chose comme ça sur ma page et ça marche très bien.

Vous pouvez utiliser <progress> l'élément en HTML5. Voir cette page pour le code source et la démonstration en direct. http://purpledesign.in/blog/super-cool-loading-bar- html5 /

voici l'élément progress ... 

<progress id="progressbar" value="20" max="100"></progress>

Cela aura la valeur de chargement à partir de 20. Bien sûr, seul l'élément ne suffira pas. Vous devez le déplacer pendant le chargement du script. Pour cela, nous avons besoin de JQuery. Voici un script JQuery simple qui commence la progression de 0 à 100 et fait quelque chose dans un créneau horaire défini. 

<script>
        $(document).ready(function() {
         if(!Modernizr.meter){
         alert('Sorry your brower does not support HTML5 progress bar');
         } else {
         var progressbar = $('#progressbar'),
         max = progressbar.attr('max'),
         time = (1000/max)*10, 
         value = progressbar.val();
        var loading = function() {
        value += 1;
        addValue = progressbar.val(value);
        $('.progress-value').html(value + '%');
        if (value == max) {
        clearInterval(animate);
        //Do Something
 }
if (value == 16) {
//Do something 
}
if (value == 38) {
//Do something
}
if (value == 55) {
//Do something 
}
if (value == 72) {
//Do something 
}
if (value == 1) {
//Do something 
}
if (value == 86) {
//Do something 
    }

};
var animate = setInterval(function() {
loading();
}, time);
};
});
</script>

Ajoutez ceci à votre fichier HTML. 

<div class="demo-wrapper html5-progress-bar">
<div class="progress-bar-wrapper">
 <progress id="progressbar" value="0" max="100"></progress>
 <span class="progress-value">0%</span>
</div>
 </div>

J'espère que cela vous donnera un bon départ.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top