我有一个像这样的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 和 ie 中我没有问题,并且我清楚地看到动画 gif。在 safari 中我看不到它。
如果我用(显然是静态的)png 更改图像,图像就会出现...
难道我做错了什么? safari 有什么问题吗?
Safari 不能很好地处理动画背景。我在某处看到过有关此问题的错误报告。
为什么不直接使用图像而不是背景?
我个人并不熟悉这个问题,但我能够在网上找到一些类似的错误报告。您在此页面上还做什么?当您遇到此问题时,您是否将注意力集中在页面上?显然,动画 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 nightly 中,GIF 不会产生动画,除非它们被绘制在某个地方。如果动画 GIF 变得不可见,则动画将暂停,并且动画不会消耗 CPU。因此,在该选项卡中的页面变得可见之前,背景选项卡中的所有动画图像都不会进行动画处理。如果动画 GIF 滚动到屏幕外,即使在前台页面上,它也会停止动画,直到再次可见。
Safari 在处理 GIF 动画时的 CPU 使用率非常好。 (有一段时间,MacNN 的读者认为 Safari 存在“动画 GIF 问题”,因为在论坛帖子中输入速度较慢,但该错误实际上与页面顶部和底部的 Flash 广告有关。)
也许这是你的 gif 图片?我刚刚在 Windows 下的 Safari 4.0.4 上启动了您的代码,并在 http://www.ajaxload.info/ 上创建了一个 gif,并且工作完美。