正在加载的GIF在结尾附近变得不连贯

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>

Answer 1

使用ezgif.com通过优化选项减少颜色数量，它将与非照片一起使用会更好-将从根本上方便准备少量颜色的显示器