在悬停时显示加载动画gif

Question

我希望你能在鼠标悬浮时显示Loading.gif图像，我已经尝试使用css，像这样:

img {background:url(../images/loading.gif) no-repeat center center; }

这对于所有的图片来说都很好，但是在我鼠标悬停的那张图片上不起作用。

所以，尝试添加一个div。

<div class="load"></div>

.load {background:url(../images/loading.gif) no-repeat center center; }

<div class="detailimage">   
    <img class="mainimage" src="<?php echo $base; ?>/img.php?w=600&h=600&img=images/<?php echo $datadetailproduct['images']; ?>" />
        <ul>
        <?php
            while ($datadetailthumb = mysqli_fetch_assoc($detailthumb)) {
        ?>                      
            <li>
                <img src="<?php echo $base; ?>/img.php?w=75&h=75&img=images/<?php echo $datadetailthumb['thumb']; ?>" />
            </li>
            <?php } ?>
        </ul>
    </div>

这是我的jQuery

$(".detailimage li img").hover(function(){
    $(".mainimage").attr("src",$(this).attr("src").replace("img.php?w=75&h=75&img=images/", "img.php?w=600&h=600&img=images/"));
    });

当我悬停在缩略图上时，我希望将loading.gif显示到.detailimage img（“主要图像”）中。

如何将该jQuery添加到我的最新jQuery中？.show(".load")？

- Ching Ching

---

img:hover {background:url(../images/loading.gif) no-repeat center center; } 鼠标悬停在图片上时，背景将显示为居中不重复的loading.gif图像。 - Arun Raj

Answer 1

也许这个纯css的解决方案可以帮助你：http://codepen.io/davidlampon/pen/KpoaNa。我简化了html并删除了所有php代码。

<div class="detailimage">       
  <ul>             
    <li>
      <img class="load"></div>
    </li>
  </ul>
</div>

CSS（这里唯一的问题是您必须指定图像尺寸）：

ul {
  list-style-type: none;
}

.load {
  width: 316px;
  height: 316px;  
  background:url(http://cdn.sstatic.net/stackoverflow/img/[e-mail]) no-repeat center center; 
}

.load:hover{
  background:url(http://www.cuisson.co.uk/templates/cuisson/supersize/slideshow/img/progress.BAK-FOURTH.gif) no-repeat center center; 
}

- David Lampon

Answer 2

如果您想要一个jQuery解决方案，可以查看这个jsfiddle。

https://jsfiddle.net/codotronix/3n6a3ug7/

HTML 代码

<li>
    <img src="http://mlb-s2-p.mlstatic.com/adesivo-parede-infantil-mickey-donald-pateta-disney-baby-16663-MLB20124000600_072014-F.jpg"/>    
</li>
<li class="hoverDiv">
    <img src="http://mlb-s2-p.mlstatic.com/adesivo-parede-infantil-mickey-donald-pateta-disney-baby-16663-MLB20124000600_072014-F.jpg"/>    
</li>

CSS

li {
    position: relative;
    list-style:none;
    display:inline-block;
    margin: 10px;
}

li img {
    height:100px;
    width:100px;
}

div.loading {
    position: absolute;
    top:0;
    left:0;
    background: url('http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif') no-repeat center center;
    height:100px;
    width:100px;
}

以及jQuery

$('li').on('mouseenter', function(){
    $(this).append('<div class="loading"></div>');
});

$('li').on('mouseleave', function(){
    $(this).find('div.loading').remove();
});

这里的技巧是在鼠标进入时添加加载div，在鼠标离开时将其删除。

- Suman Barick

---

感谢Suman Barick的回答，如果图像在页面上成功加载，它会自动隐藏loading.gif吗？有没有解决方案？ - Ching Ching

你想要在用户仍然悬停在li上并且真实图像尚未加载时才显示loading.gif吗？ - Suman Barick

我希望用户在悬停在缩略图上时，能够在大图像上显示loading.gif。当成功加载后，它将自动隐藏loading.gif并在大图像上显示缩略图像。 - Ching Ching