web-dev-qa-db-fra.com

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

Je travaille sur un site qui contient tout un tas de mp3 et d'images, et j'aimerais afficher un gif de chargement pendant que tout le contenu se charge.

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

Aucune suggestion?

javascripthtmlcssloadingpageload
26
user27171

Généralement, les sites qui 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 serait similaire à 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);
}

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

28
mmattax

Vous avez dit que vous ne vouliez pas faire ça en AJAX. Alors que AJAX est idéal pour cela, il existe un moyen d'afficher un DIV en attendant la totalité du <body> charger. Ca fait plutot comme ca:

<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. Donc, le layer2 <DIV> ne sera pas affiché tant que le chargement de la page ne sera pas terminé, après quoi onload se déclenchera.

8
Mike E.

Et avec 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 HTML ...

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

Et CSS ...

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

Ensuite, dans votre chargeur div, vous mettriez le GIF, et tout texte que vous vouliez, et il disparaîtrait une fois la page chargée.

3
joe_young

Tout d'abord, configurez une image de chargement dans une div. Ensuite, récupérez l'élément div. Ensuite, définissez une fonction qui modifie le CSS pour rendre la visibilité "cachée". Maintenant, dans le <body>, mettez onload au nom de la fonction.

2
Peach

# Méthode css pure

Placez-le 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 la balise/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

1
MindCraftMagic

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

voici l'élément de progrès ...

<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 démarre la progression de 0 à 100 et fait quelque chose dans l'intervalle de temps 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 début.

0
Raj Sharma

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 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 fonctionne très bien.

0
Johnz