css - Skrollr 背景图像在更改时消失

Question

我正在尝试使用 skrollr 制作动画，但是当背景图像发生变化时，它们会短暂消失，有时当服务器延迟一秒钟时，它们会完全消失，直到我再次来回滚动。

这是我使用的代码:

@-skrollr-keyframes name {
    1100 {background: url(img/heads/picture1.png) no-repeat;}
    1101 {background: url(img/heads/picture2.png) no-repeat;}
}

顺便说一句:包含背景图像的 div 位于移动的 div 中。有什么办法可以解决这个问题？

编辑:每个动画背景图像都在闪烁!

PS:抱歉我的英语不好，我是德语。

Answer 1

首先，根据 skrollr 的文档，skrollr 不知道如何在图像之间设置动画。为了解决这个问题，您需要在 url 的 css 属性前添加一个感叹号，如下所示

background: !url(img/heads/picture1.png) no-repeat;

参见来源 here

对于闪烁的图像，请考虑在 DOM 上渲染任何内容之前预加载所有图像。试试这个，

var images = new Array()
        function preload() {
            for (i = 0; i < preload.arguments.length; i++) {
                images[i] = new Image()
                images[i].src = preload.arguments[i]
            }
        }
        preload(
            "img-path/imagename.jpg",
            "img-path/imagename.jpg",
            "img-path/imagename.jpg",
            "img-path/imagename.jpg",
            "img-path/imagename.jpg"
        )

希望对您有所帮助，祝您好运!