Loading Image Problem

[WullieJm]

have this simple gallery here

http://dev.pixiders.com/sample/index.php

 

I want to add a loader gif before the images untill they laod, i have tried hiding the images li and unhiding after load but it messed up the page because i just placed the loading image above the image.

 

 

Gallery code

  <div id="gallery">
    <ul>
    <?php
$query_Recordset1 = mysql_query("SELECT * FROM property order by id DESC");
$i=1;
   while($del_row=mysql_fetch_array($query_Recordset1)){ ?>
      <li id="image"><span><?php echo $i; ?></span>
      <a href="property_details.php?id=<?php echo $del_row['id'];?>" class="nocolor">
      <img src="images/property/<?php echo $del_row['image1']; ?>" height="435" alt="profile"/>
      </a>
        <div class="info">
        <a href="property_details.php?id=<?php echo $del_row['id'];?>" class="nocolor">
          <dl>
            <dt>Property Type : </dt>
            <dd><?php echo $clsproperty_type->get_type($del_row['type']);?></dd>
            <dt> Square Footage :</dt>
            <dd><?php echo $del_row['sq_ftage'];?></dd>
             <dt> Land Area:</dt>
            <dd><?php echo $del_row['land_area'];?></dd>
            <dt> Year :</dt>
            <dd><?php echo $del_row['yr_built'];?></dd>
            <dt> Baths:</dt>
            <dd><?php echo $del_row['baths'];?></dd>
            <dt> Beds:</dt>
            <dd><?php echo $del_row['bed_rooms'];?></dd>
            <dt> Price :</dt>
            <dd><?php echo number_format($del_row['price']);?></dd>
            <dt> Address:</dt>
            <dd><?php echo substr($del_row['address'],0,25);?></dd>
          </dl>
          read more</a> </div>
      </li>      
    <?php 
$i++;

} ?>    
    </ul>
  </div>

 

Can someone please help me with this?

[nogray]

You would create a div around the image with the height and width of the image and set the background of that div to be the loading div (set it to no-repeat center center). In your image tag, set the style="display:none;" and add onload="this.style.display='';" That sould hide the images until they are loaded.