javascript - 在 :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>