Question

这是一个小问题，但是一个让我烦恼的问题。我有一个加载GIF设置为背景图像。当页面加载了所有内容后，背景图像会变为箭头。非常简单的构建。

问题是，在第一次访问之前，在缓存任何内容之前，GIF在页面加载完内容之前几秒钟变得非常不稳定。有人知道修复或解决方法吗？

我在网上看了看，但是在这样的情况下，找不到任何专门针对GIF的东西。提前谢谢！

Test-site（暂时在线）

HTML

<a href=".start" id="next"></a>

CSS

.cbp-af-header a#next {
    display:block;
    background-image:url('../images/loading.gif');
    background-size:30px 30px;
    background-repeat:no-repeat;
    background-position:center; 
    width:400px;
    margin:0 auto;
    height:50px;
    position:absolute;
    top:550px;
    left:50%;
    margin-left:-200px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    cursor:default;
}

.cbp-af-header a#next:hover {
    background-color:#000;
}

.cbp-af-header a.next-ready {
    background-image:url('../images/raquo-down.png') !important;
    background-size:19px 13px !important;
    cursor:pointer !important;
}

的jQuery

<script type="text/javascript">
    $(window).bind("load", function() {
            $('a#next').addClass('next-ready');
    });
</script>

加载GIF接近尾声

0 个答案: