loading image while main image load

Question

i have a e-commerce site and when i fetch all products on a page. but all image are very high. i want while main image load till a loading image will show to user. thnx

$sqlpro="select * from tbl_product $where";
$respro=mysql_query($sqlpro);
$totalproduct=mysql_num_rows($respro);  
if($totalproduct>0)
  {
      while($rowpro=mysql_fetch_array($respro))
     {
 <a href="saree?id=<?php echo base64_encode($rowpro['pro_unickid'])?>">
     <img src="ajax_loader-2.gif" id="loding_image<?php echo $rowpro['pro_unickid']?>"  />
      <img src="admin/<?php echo $rowpro['thumbimage1']; ?>" id="image_of_product<?php echo $rowpro['pro_unickid']?>"  
                    onmouseover="this.src='admin/<?php echo $rowpro['thumbimage2']; ?>',imagehidesaree('left<?php echo $rowpro['pro_unickid']?>','right<?php echo $rowpro['pro_unickid']?>','bottom<?php echo $rowpro['pro_unickid']?>');"
                    onmouseout="this.src='admin/<?php echo $rowpro['thumbimage1']; ?>',imagemouseout('left<?php echo $rowpro['pro_unickid']?>','right<?php echo $rowpro['pro_unickid']?>','bottom<?php echo $rowpro['pro_unickid']?>');"
                    width="243" height="359"   />
                    </a>
}
}

Answer 1

<img style="background:url('ajax_loader-2.gif') no-repeat center;" src="admin/<?php echo $rowpro['thumbimage1']; ?>" id="image_of_product<?php echo $rowpro['pro_unickid']?>" onmouseover="this.src='admin/<?php echo $rowpro['thumbimage2']; ?>',imagehidesaree('left<?php echo $rowpro['pro_unickid']?>','right<?php echo $rowpro['pro_unickid']?>','bottom<?php echo $rowpro['pro_unickid']?>');" onmouseout="this.src='admin/<?php echo $rowpro['thumbimage1']; ?>',imagemouseout('left<?php echo $rowpro['pro_unickid']?>','right<?php echo $rowpro['pro_unickid']?>','bottom<?php echo $rowpro['pro_unickid']?>');" width="243" height="359"   />

如何将加载程序图像设置为img元素背景。

Answer 2

You could write a bit of jQuery that binds onto any img tag with a given class.

Eg

• In your HTML you put the low-res version in your img tag, give it a class to say it should switch and add a data attribute for the location of the high resolution version
• Bind on the 'onload' event of the image so that when it's loaded it will add an identical img tag with the high resolution src - but hidden
• Bind an 'onload' event on that so that when it's loaded it hides the low-res version and replaces with the high-res.

Although this doesn't do everything you want it to - here's a POC to show what I mean:

$('.LowToHiRes').on( 'load', function() {
    newSrc = $(this).data('high-res-src');
    $(this).after( '<img class="HiRes Hidden" src="'+newSrc+'" />' );
    bindHiResLoader( $(this) );
});

function bindHiResLoader( element ) {
    element.next().on( 'load', function() {
        $(this).prev().hide();
        $(this).show();
    });
}

There's a demo here: http://jsfiddle.net/kX279/1/