加載GIF預留位置：懸停

的jsfiddle：http://jsfiddle.net/90gkv1gw/加載GIF預留位置：懸停

我有一個加載gif動畫on:hover的圖像。如何修改這個以顯示某種加載gif佔位符，而動畫圖像需要時間加載？

如果你將鼠標懸停在他們的圖像，您簡要看到一個綠色動畫由左到右滑，但一旦圖像完全加載，它永遠不會再次顯示。我怎樣才能做到這一點？

2014-10-01 O P

$('.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>

來源

2014-10-01 18:10:36 ValentinVoilean

這將始終打開'甚至.loading'圖像後已經加載。 – 2014-10-01 18:19:10

@OP，但圖像覆蓋。加載 – 2014-10-01 18:27:29

圖像實際上是在第一次加載後緩存的。「.loading」div與元素的大小相同，沒有背景。當你將鼠標移動到它上面時，消息就會出現（或者你可以用一個load.gif圖像替換它）直到圖像被加載（如果圖像被緩存，加載消息將不會被注意到） – ValentinVoilean 2014-10-01 18:31:38

您可以使用jQuery

的負載功能

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

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

你可以在這裏閱讀更多http://api.jquery.com/load-event/

來源

2014-10-01 17:47:19

加載GIF預留位置：懸停

回答

相關問題