2
的jsfiddle:http://jsfiddle.net/90gkv1gw/加载GIF预留位置:悬停
我有一个加载gif动画on:hover
的图像。如何修改这个以显示某种加载gif占位符,而动画图像需要时间加载?
如果你将鼠标悬停在他们的图像,您简要看到一个绿色动画由左到右滑,但一旦图像完全加载,它永远不会再次显示。我怎样才能做到这一点?
的jsfiddle:http://jsfiddle.net/90gkv1gw/加载GIF预留位置:悬停
我有一个加载gif动画on:hover
的图像。如何修改这个以显示某种加载gif占位符,而动画图像需要时间加载?
如果你将鼠标悬停在他们的图像,您简要看到一个绿色动画由左到右滑,但一旦图像完全加载,它永远不会再次显示。我怎样才能做到这一点?
$('.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>
您可以使用jQuery
的负载功能$("#myimage").load(function() {
//Put your code here to stop the loading animation
});
你可以在这里阅读更多http://api.jquery.com/load-event/
这将始终打开'甚至.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