在主图像加载时加载图像

Question

我有一个电子商务网站，当我在一个页面上获取所有产品时.但是所有的图像都很高。我希望主图像加载，直到加载图像将显示给用户。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

您可以编写一些jQuery，它与给定的类绑定到任何img标记上。

例如。

• 在HTML中，您将低分辨率版本放在img标记中，给它一个类来表示它应该切换，并为高分辨率版本的位置添加一个数据属性。
• 绑定到图像的“onload”事件，以便在加载时，它将添加一个具有高分辨率src但隐藏的相同img标记。
• 在上面绑定一个'onload‘事件，这样当它加载时，它会隐藏低分辨率版本，并用高分辨率替换。

虽然这并不能满足您的要求-这里有一个POC来展示我的意思：

$('.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();
    });
}

这里有一个演示：http://jsfiddle.net/kX279/1/