Preload DIV (loading.gif)

[casapiranha]

Salve,
ho una pagina che mi estrae i dati da un database,
ogni gruppo di dati è racchiuso in un DIV creato dinamicamente.

Vorrei sapere se esiste la possibilità di inserire in ogni DIV un loading.

questo è il formato con cui richiamo i dati dal DB:

pagina1.html

HEAD

<script type="text/javascript">
function showCat(str)
{
if (str=="")
  {
  document.getElementById("divload").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("divload").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","pagina2.php?q="+str,true);
xmlhttp.send();
}
</script>

BODY

<form>
<select name="users" onchange="showCat(this.value)">
  <?php
do {  
?>
  <option value="<?php echo $row_RsCategoria['id_cat']?>"<?php if (!(strcmp($row_RsCategoria['id_cat'], $row_RsCategoria['categoria']))) {echo "selected=\"selected\"";} ?>><?php echo $row_RsCategoria['subcat']?></option>
  <?php
} while ($row_RsCategoria = mysql_fetch_assoc($RsCategoria));
  $rows = mysql_num_rows($RsCategoria);
  if($rows > 0) {
      mysql_data_seek($RsCategoria, 0);
	  $row_RsCategoria = mysql_fetch_assoc($RsCategoria);
  }
?>
</select>
</form>


<div id="divload">Seleziona la categoria</div>

pagina2.php:

<?php
$q=$_GET["q"];

$con = mysql_connect('xxxxxxx', 'xxxxxxx', 'xxxxxxx');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("database", $con);

$sql="SELECT * FROM video WHERE categoria = '".$q."'";

$result = mysql_query($sql);

?>

<?php do { ?><div id="block">

QUI I DATI RICHIAMATI CON LOADING </div>

<? }

mysql_close($con);
?>

[m4rko80]

Semplicemnte prima di caricare o comunque quando il div e' vuoto
document.getElementById("divload").innerHTML= '[img]/pathimg/loading.gif[/img]';

[casapiranha]

Grazie per la risposta m4rko80,
il problema è che il div creato dinamicamente è il "block" mentre il "divload" è il contenitore generale di tutti i "block"

In pratica vorrei che ad ogni risultato venga visualizzato un "loading" magari ritardato di 200ms a cui poi aggiungo un fade in.

[cavicchiandrea]

Premesso che non sono un esperto in php, ma qui:

<?php do { ?><div id="block">

QUI I DATI RICHIAMATI CON LOADING </div>

<? }

mysql_close($con);
?>

crei un ciclo che genererà x div block? Se è cosi rivedi l'operazione perché gli id devono essere univoci, in oltre se i div block li generi in pagina2 che è caricata via ajax è impossibile che tu possa vedere un'immagine d'attesa in un div che ancora non esiste

[casapiranha]

come avrai intuito dal codice, tramite un selettore dinamico scelgo la categoria da visualizzare, che verrà richiamata via ajax nella "pagina2.php"

qui prendo la variabile passata dalla pagina1 e la richiamo nell'estrazione dei dati al db. dati che successivamente andranno a compilare i vari box "block" (perchè dovrebbero essere univoci?) con tutta la formattazione dei vari elementi.
ed é qui che vorrei il loading.

[cavicchiandrea]

A) Io non devo intuire nulla se tu che mi devi dire come funziona.
B) Non postare codice php confonde solo ed è influente per javascript posta sempre html (che quello che riceve il browser)
C) Gli Id devo essere univoci (perché si, troppo lungo da spiegare) altrimenti useresti le classi
D) Il div block è presente nella pagina?
E) Posta il link alla pagina pubblica online altrimenti diventa difficile è complesso aiutarti.