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.

 

 

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

[QuickOldCar]

Try to use this javascript script to lazy load the images, you can also change the pre image to what you want.

 

http://www.dynamicdrive.com/forums/archive/index.php/t-46393.html

[WullieJm]

Using that script i tried a test link with a loader behind the image rather than it fading but dfoesnt seem to wirk.

[WullieJm]

I have tried hiding the images until page loads then display the loader, but the loader div messes up and i cant get it to go to all images on the while loop.

 

can someone help me out please?

 

gallery

 

<div id="gallery">
    <ul id="container">
    <?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>