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

我有这样一个javascript“加载”功能：如何将.gif作为背景图像显示？

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和ie中我没有问题，并且我清楚地看到了动画gif。在safari中，我看不到它。如果我改变图像（显然是静态的）PNG图像出现... 我做错了什么？ Safari浏览器有什么问题？

来源

2010-04-06 Vito De Tullio

有已知的关于safari和动画gif的bug报告。 gif冻结 - 在某些情况下甚至浏览器冻结 - 我在加载大量动画gif的页面上遇到过这种情况。 – easwee 2010-04-06 14:59:40

顺便提一下，请不要在HTML文档中使用'getAttribute' /'setAttribute'。 IE6-7中存在严重的错误，这会导致'style'属性和其他错误。使用DOM Level 2的HTML和CSS属性更可靠，更具可读性：'div.style.textAlign ='center';'et al。另外，'document.body'优于'getElementsByTagName'调用。 – bobince 2010-04-06 15:59:46

坦克@bobince，我改变了你的意见源... 不幸的是，问题remanins：\ – 2010-04-07 07:29:36

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

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

来源

2010-04-06 14:52:19

我个人并不熟悉这个问题，但我可以在网上找到一些类似的错误报告。你还在做什么？遇到此问题时，您是否专注于网页？显然，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

从第一环节特别是有关片段：

在这两种野生动物园2，WebKit Nightlies版，GIF图像不要”除非他们被绘在某个地方，否则不会生气。如果动画GIF变为不可见，则动画将暂停，动画不会消耗CPU。因此，在该选项卡中的页面变为可见之前，后台选项卡中的所有动画图像都不会生成动画。如果动画GIF即使在前景页面上滚动离屏，它也会停止动画，直到它再次变为可见。

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

来源

2010-04-06 14:53:22 Pops

umm，但gif应该是可见的：这是一个div的背景图像与z-index：10000 .. – 2010-04-07 07:28:40

也许这是你的gif图像？我刚刚在Safari 4.0.4下用gif创建的gif在windows下启动了你的代码，并且完美地工作。

来源

2010-04-06 15:03:46

我尝试了一个来自ajaxload.info的gif，但我看不到它：\ 我尝试了一个trasnparent gif和一个普通的gif：\ – 2010-04-07 07:27:39

这是我的/你的代码，在上述safari上工作。 http://work4bandwidth.com/demos/backroundgif.html lemme知道它是否适合你 – 2010-04-08 22:10:16

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

回答

相关问题