加载GIF预留位置：悬停

Question

的jsfiddle：http://jsfiddle.net/90gkv1gw/

我有一个加载gif动画on:hover的图像。如何修改这个以显示某种加载gif占位符，而动画图像需要时间加载？

例子：http://giphy.com

如果你将鼠标悬停在他们的图像，您简要看到一个绿色动画由左到右滑，但一旦图像完全加载，它永远不会再次显示。我怎样才能做到这一点？

Answer 1

$('.loading').mouseover(function(e) { 
 
     if (e.target == e.currentTarget){ 
 

 
      var self = $(this), 
 
       loading = self.find('.loadingText'), 
 
       image = $('<img>').attr('src','http://media4.giphy.com/media/fa0ZTUSQu7AjK/200w.gif'); 
 

 
      loading.show(); 
 
      image.load(function() { loading.hide(); }); 
 

 
      self.siblings('img').remove(); 
 
      self.before(image); 
 
     } 
 

 
    }).mouseout(function() { 
 
     var self = $(this), 
 
      src = self.siblings('img').attr('src').replace('200w.gif', '200w_s.gif'); 
 
     self.siblings('img').attr('src', src); 
 
    });

a{ 
 
      position:relative; 
 
      width:200px; 
 
      height:150px; 
 
     } 
 
     .loading{ 
 
      position:absolute; 
 
      width:200px; 
 
      height:150px; 
 
      top:0; 
 
      left:0; 
 
      text-indent:10px; 
 

 
     } 
 
     a img{ 
 
      position: absolute; 
 
     } 
 
     .loading .loadingText{ 
 
      background:red; 
 
      color:white; 
 
      font-size:12px; 
 
      line-height:15px; 
 
      display:none; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<a href="#"> 
 
    <img src="http://media4.giphy.com/media/fa0ZTUSQu7AjK/200w_s.gif" width="200" /> 
 
    <div class="loading"> 
 
     <div class="loadingText">Loading</div> 
 
    </div> 
 
</a>

Answer 2

您可以使用jQuery

的负载功能

$("#myimage").load(function() { 

//Put your code here to stop the loading animation 
}); 

你可以在这里阅读更多http://api.jquery.com/load-event/