Come visualizzare una schermata di caricamento durante il caricamento del contenuto del sito

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

Domanda

Sto lavorando su un sito che contiene un sacco di mp3 e immagini e mi piacerebbe visualizzare una gif di caricamento mentre tutto il contenuto viene caricato.

Non ho idea di come raggiungere questo obiettivo, ma ho la gif animata che voglio usare.

Qualche suggerimento?

È stato utile?

Soluzione

In genere i siti che lo fanno caricando il contenuto tramite ajax e ascoltando l'evento readystatechanged per aggiornare il DOM con una GIF di caricamento o il contenuto.

Come stai caricando i tuoi contenuti?

Il codice sarebbe simile a questo: 

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);
}

Esistono molte librerie javascript di terze parti che potrebbero semplificarti la vita, ma quanto sopra è davvero tutto ciò di cui hai bisogno.

Altri suggerimenti

Hai detto che non volevi farlo in AJAX. Mentre AJAX è ottimo per questo, c'è un modo per mostrare un DIV in attesa che venga caricato l'intero <body>. Va qualcosa del genere: 

<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'evento onload non si attiva fino a quando non viene caricata tutta la pagina. Quindi il layer2 <DIV> non verrà visualizzato fino al termine del caricamento della pagina, dopodiché verrà attivato l'onload.

Che ne dici di jQuery? Un semplice ... 

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

E l'HTML ... 

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

E CSS ... 

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

Quindi nel tuo caricatore div inseriresti la GIF e tutto il testo che desideri e svanirà una volta caricata la pagina.

Innanzitutto, imposta un'immagine di caricamento in un div. Quindi, ottieni l'elemento div. Quindi, imposta una funzione che modifica il CSS per rendere la visibilità su & Quot; nascosto & Quot ;. Ora, in <body>, metti l'onload sul nome della funzione.

Metodo #Cure css

  

Posizionalo nella parte superiore del codice (prima del tag di intestazione) 

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

  

E questo in fondo dopo tutto l'altro codice (tranne il 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>

  
    

Questo funziona sempre per me il 100% delle volte

  

In realtà c'è un modo abbastanza semplice per farlo. Il codice dovrebbe essere simile a: 

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

    }

E in HTML: 

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

Ho fatto qualcosa del genere sulla mia pagina e funziona benissimo.

Puoi usare <progress> l'elemento in HTML5. Vedi questa pagina per il codice sorgente e la demo live. http://purpledesign.in/blog/super-cool-loading-bar- HTML5 /

ecco l'elemento di progresso ... 

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

questo avrà il valore di caricamento a partire da 20. Naturalmente solo l'elemento non sarà sufficiente. Devi spostarlo mentre lo script si carica. Per questo abbiamo bisogno di JQuery. Ecco un semplice script JQuery che avvia l'avanzamento da 0 a 100 e fa qualcosa nell'intervallo di tempo definito. 

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

Aggiungi questo al tuo file 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>

Spero che questo ti dia un inizio.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top