在:hover 上加载 gif 占位符答案

【问题标题】：Loading gif placeholder on:hover在:hover 上加载 gif 占位符
【发布时间】：2014-10-02 02:25:28
【问题描述】：

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

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

如果您将鼠标悬停在他们的图片上，您会短暂看到一个从左向右滑动的绿色动画，但一旦图片完全加载，它就再也不会显示了。我怎样才能做到这一点？

【问题讨论】：

【解决方案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>

【讨论】：

即使在图像已经加载之后，这也会始终显示.loading。
@OP 但图片掩盖了 .loading
图片实际上是在第一次加载后缓存的。 “.loading” div 与元素大小相同，没有背景。当您将鼠标移到它上面时，将出现消息（或者您可以将其替换为 loading.gif 图像）直到图像被加载（如果图像被缓存，则不会注意到加载消息）

【解决方案2】：

可以使用jQuery的加载功能

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

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

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

【讨论】：