html - 背景图片加载缓慢

Question

我有一个网站使用可根据窗口大小调整大小的背景图像。这是通过放置 <img> 来实现的。在正文中，以及一些自定义 CSS ( Technique #2 )。

我在标题中使用一个简单的条件语句来确定要显示的图像:

<?php if (is_single(array(11,24,26,28,30,36))) : ?>
    <img src="http://www.lookingglassstudio.ca/wp-content/uploads/2011/08/weddingsbg.jpg" class="bg" />
<?php else : ?>
    <img src="http://www.lookingglassstudio.ca/wp-content/uploads/2011/08/stylingbg.jpg" class="bg" />
<?php endif; ?>

我的问题是，每次我刷新或导航到其他地方时，图像都会重新加载。这导致白色闪光。见网址here!

我估计 php 脚本每次都会调用图像，从而导致“闪光”。

有什么办法解决这个问题吗？使图像缓存而不是每次都重新加载的方法？

编辑

我认为这个问题是一个 FOUC 问题。刷新时会闪烁背景色(默认白色)，造成闪烁。 FOUC 修复似乎无济于事。

即使删除了 PHP 条件语句也会出现问题。 <img> 时出现问题更改为背景图像。

Answer 1

我不久前注意到了这个问题，但希望您能得到适合您的答案。

鉴于到目前为止没有任何效果，我有一条建议:当您保存 .jpg 文件(大背景图像)时，如果可能，您可能希望将它们保存为“渐进式”格式。

http://en.wikipedia.org/wiki/JPEG

There is also an interlaced "Progressive JPEG" format, in which data is compressed in multiple passes of progressively higher detail. This is ideal for large images that will be displayed while downloading over a slow connection, allowing a reasonable preview after receiving only a portion of the data. However, progressive JPEGs are not as widely supported, and even some software which does support them (such as some versions of Internet Explorer) only displays the image once it has been completely downloaded.

它不会从上到下按行加载图像，而是“逐渐”变得更清晰且像素化程度更低，因此您不会看到 FOUC 和背后可见的背景。

除此之外，请确保您提供的背景颜色不会与图像形成强烈对比，并尝试在您的设计可以承受的范围内压缩文件大小。