在:hover上加载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/