Question

我有一个像这样的javascript“加载”功能：

function splashScreen() {
    var div = document.createElement('div');
    div.appendChild(document.createTextNode("some text"));
    div.style.position = "fixed";
    div.style.width = "100%";
    div.style.height = "100%";
    div.style.left = "0";
    div.style.top = "0";
    div.style.zIndex = "1000";
    div.style.background = "white url('img/ajax-loader.gif') no-repeat center";
    div.style.fontSize = "x-large";
    div.style.textAlign = "center";
    div.style.lineHeight = "3em";
    div.style.opacity = "0.75";
    div.style.filter = "alpha(opacity=75)"; // fix ie
    document.body.appendChild(div);
    return true;
}

我在表单操作（onsubmit="return splashScreen()"）中使用此函数来显示“旋转徽标”，而下一页加载... 问题在于“img / loading.gif”和safari（在winXP上）：在ff中，即我没有问题，我清楚地看到GIF动画。在野生动物园我无法看到它。如果我用（显然是静态的）png更改图像，图像会出现...... 难道我做错了什么？ safari有什么问题？

Answer 1

Safari不能很好地处理动画背景。我在某个地方看到过关于这个的错误报告。

为什么不使用图像而不是背景？

Answer 2

我个人并不熟悉这个问题，但我能够在网上找到一些类似的错误报告。你在这个页面上还做了什么？遇到此问题时，您是否继续关注页面？显然，动画GIF的处理非常复杂：

http://webkit.org/blog/96/background-music/
http://www.quirksmode.org/bugreports/archives/2004/12/animated_gifs_u.html
https://bugs.webkit.org/show_bug.cgi?id=7320

来自第一个链接的特别相关的片段：

在Safari 2和WebKit的夜魇中，GIF不会动画，除非它们被绘制在某处。如果动画GIF变为不可见，则动画将暂停，动画不会消耗CPU。因此，在该选项卡中的页面变为可见之前，背景选项卡中的所有动画图像都不会设置动画。如果动画GIF即使在前景页面上也会在屏幕外滚动，它将停止动画直到再次显示为止。

Safari的动画GIF的CPU使用率非常好。（有一段时间MacNN的读者认为Safari有一个“动画GIF问题”，因为在论坛帖子中输入时速度很慢，但该错误实际上与页面顶部和底部的Flash广告有关。）

Answer 3

也许这是你的GIF形象？我刚刚在Safari下使用http://www.ajaxload.info/创建的gif在Safari 4.0.4上启动了代码，并且运行完美。

如何将.gif显示为背景图片？

3 个答案: