Immagine "Loading"

**tizyjayd** · 05-01-2015, 16:05

Buongiorno,

ho questo codice che una volta interrogato dalla pagina principale, mi va a caricare i dati della pagina "showsongs.php".

Siccome a volte richiede un po di tempo a caricare, vorrei aggiungere l'utile scritta "loading" oppure un'immagine. Ma non so dove mettere le mani.

questo è il codice .js

codice:

var xmlhttp
var str_global3;
function showsongs(moodid,str3,pid)
{
    str_global3=str3;
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }






var url="/mood/songslist/showsongs.php";
url=url+"?by="+str3;
url=url+"&moodid="+moodid;
url=url+"&page="+pid;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged3;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}


function stateChanged3()
{
if (xmlhttp.readyState==4)  {

   document.getElementById("showsongs").innerHTML=xmlhttp.responseText;

  }
}


function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

Grazie a tutti.

**tampertools** · 05-01-2015, 20:19

codice:

 function showsongs(moodid,str3,pid){
document.gtetElementById("loading").style.display = "block"; // Aggiungi questo
str_global3=str3;

codice:

document.getElementById("showsongs").innerHTML=xmlhttp.responseText;
document.getElementById("loading").style.display="none"; // Aggiungi questo

All'inizio del <body> aggiungi

codice HTML:

<div id="loading">
  Loading...
</div>

e nel css

codice:

#loading {
    background-color: rgba(0, 0, 0, .5);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

Discussione: Immagine "Loading"

Strumenti discussione

Ricerca discussione

Visualizza

Immagine "Loading"

Permessi di invio