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标记。

E.g。

在你的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/

主图像加载时加载图像

2 个答案: