随机背景图像在 Firefox 中无法正确刷新

发布于 2024-11-09 05:24:08 字数 1271 浏览 2 评论 0原文

据我所知，这个问题是 Firefox 特有的。（我在 Win7 Ultimate 上使用 FF 4.0.1。）

我有一个页面需要显示随机背景图像。我使用一个小的 php 脚本 (rotate.php) 来实现这个目的。所以我的CSS基本上是这样的：（

#main {background-image: url(bg/rotate.php);}

我提到这一点是因为我的猜测是Firefox对图像名称没有改变的事实感到有些困惑，尽管内容图像确实如此。）

最重要的是，我有一个小动画（用 javascript 制作），其中一个小点从页面顶部落下。动画元素（包含此点）穿过#main 元素（及其随机背景图像）。

问题是 Firefox 在刷新页面时无法正确更新背景图像。

看来 Firefox 实际上首先显示了上一个页面加载的背景图像，并且只有当动画运行在该图像上时，Firefox 才会真正更新图像，但它只更新动画元素。因此，结果是两个图像的混合（先前页面加载、当前页面加载）。

仅当调整窗口大小时（例如通过打开/关闭 Firebug），Firefox 才会完全重绘图像（并最终完整显示新图像）。

您可以在此处查看实际问题：http://www.terpsycordes.com/en/home （您可能需要重新加载几次才能连续获得两个不同的图像并查看问题，并且您必须等待几秒钟才能开始动画。）（这似乎又仅限于 Firefox。

）你有什么办法可以避免这种丑陋的影响吗？有什么技巧可以强制 Firefox 重绘图像吗？

提前致谢。

编辑：

感谢 DavidJCobb 提供的链接，我尝试了各种 JavaScript 技巧来强制 Firefox 重新绘制背景图像。结果虽然还不是完全令人满意，但无论如何已经比以前好了。这是我在测试过程中发现的内容（希望这可以帮助某人）：

更改元素（#main）的不透明度（即使是轻微的）或给它一个透明的轮廓确实会强制重绘（因此新图像会完全显示）；
如果应用的类存在并且影响元素的某些属性（例如轮廓），则更改元素的类也有效；
但是，如果在页面加载时立即设置，则所有这些都不起作用：我必须等待大约 100 毫秒才能触发此事件才能使重绘生效。

因此，在更新之前的一小段时间里，我仍然会看到之前的图像。如果有人有关于如何改进这一点的建议，我很高兴听到。

原文

This problem is specific to Firefox as far as I can tell. (I'm using FF 4.0.1 on Win7 Ultimate.)

I have a page where I need to display a random background-image. I use a small php script (rotate.php) to do the trick. So my css basically reads as:

#main {background-image: url(bg/rotate.php);}

(I mention this because my guess is that Firefox gets somewhat confused by the fact that the image name doesn't changes, although the content of the image does.)

On top of that I have a small animation (made in javascript) in which a small dot falls from the top of the page. The animated element (containing this dot) goes through the #main element (and its random background-image).

The problem is about Firefox not updating the background-image correctly when refreshing the page.

It seems Firefox actually first displays the background-image from the previous page load, and only when the animation runs over this image does Firefox actually update the image, but it only updates the part covered by the animated element. So the result is a mix of both images (previous page load, current page load).

Only when resizing the window (e.g. by opening/closing Firebug) does Firefox entirely redraw the image (and finally displays the new image in whole).

You can see the problem in action here: http://www.terpsycordes.com/en/home (You may need to reload several times to get two different images in a row and see the problem, and you have to wait a few seconds for the animation to start.) (Once again this seem to be Firefox-only.)

Have you got any idea to avoid this ugly effect? Is there any trick to somehow force Firefox to redraw the image?

Thanks in advance.

Edit :

Thanks to the link provided by DavidJCobb, I tried various javascript tricks to force Firefox repainting the background-image. The result is still not entirely satisfactory, but it's better than before anyway. Here's what I found during my testing (hope this can help somebody):

changing the element (#main) opacity (even slightly) or giving it a transparent outline does force a redraw (and so the new image is displayed entirely);
changing the class of the element works too, if the applied class exists and affects some property of the element (e.g. outline);
however none of this work if set immediately on page load: I have to wait about 100ms before firing this events in order for the repaint to be effective.

So I still see the previous image during a brief moment before it is updated. If anybody has a tip on how to improve this, I'd be glad to hear it.

分享到QQ

分享到微博