顯示加載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」）？

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/apple-touch-icon@2.png) 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; 
} 

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

這裏的訣竅是在mouseenter上添加加載div，並在mouseleave上刪除它。