Question

jsFiddle： http://jsfiddle.net/90gkv1gw/

我有一个加载动画gif on:hover的图片。如何修改它以显示某种加载GIF占位符，而动画图像需要时间加载？

如果将鼠标悬停在图像上，则会短暂看到从左到右滑动的绿色动画，但一旦图像完全加载，它就不会再次显示。我怎么能做到这一点？

Answer 1

＆＃13;

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

＆＃13;

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;
        }

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用jQuery的加载功能

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

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

您可以在此处阅读更多内容http://api.jquery.com/load-event/

加载gif占位符：悬停

2 个答案: