加載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/