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脚本每次调用图像，导致'flash'。

有什么方法吗？如何制作图像缓存而不是每次都重新加载？

修改

我认为这个问题是FOUC的问题。刷新时会闪烁背景颜色（默认为白色），从而导致闪烁。 FOUC修复似乎没有帮助。

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

Answer 1

我刚才注意到这个问题，但希望你得到一个对你有用的答案。

到目前为止，看到没有任何内容对你有用，我有一条建议：当你保存.jpg文件（大背景图片）时，如果可能的话，你可能希望以“渐进”格式保存它们。

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

还有隔行扫描的“渐进式JPEG”格式，其中包含数据   被逐渐压缩的细节压缩多次。这个   适用于下载时显示的大图像   通过慢速连接，接收后允许合理的预览   只有一部分数据。但是，渐进式JPEG不是   广泛支持，甚至一些支持它们的软件（例如   因为某些版本的Internet Explorer）只显示图像   已完全下载。

不是将图像从上到下加载到一行中，而是“渐进地”变得更清晰，更少像素化，因此您不会看到FOUC与背后可见的背景一样多。

除此之外，请确保提供的背景颜色不会与图像形成鲜明对比，并尝试按照设计所能承受的压缩文件大小。

Answer 2

我检查了您的网站，发现一切都按预期工作。当浏览器请求具有空缓存的页面时，图像将花费几秒钟来下载。当您导航到网站的任何其他页面时，浏览器从缓存中获取图像 - 我在FF4上看不到任何闪存，也没有看到浏览器每次会话多次请求stylingbg / weddingsbg图像。

如果您发现每次访问该页面时都加载了该图像，则可能是您的浏览器缓存被禁用（或配置不正确）。服务器似乎没有发送Expires标头;明确指定过期标题可能在某些情况下有所帮助。

另请注意，当您点击刷新时，某些浏览器会从头开始请求所有资源。现代浏览器（我在FF4上查看）将发送If-Modified-Since标头，合理的服务器只返回 Not Modified 响应，因此没有闪烁。

除此之外，我建议您在页面中添加与背景图像色调匹配的CSS背景颜色。这有助于图像被禁用或需要很长时间才能加载。还要考虑@Wesley关于使用渐进式图像的建议。您当前的图像从上到下加载。您可以通过将图像转换为渐进式JPEG来改善用户体验。

Answer 3

改用CSS。

<style>
body.weddings {
    background-image: url('http://www.lookingglassstudio.ca/wp-content/uploads/2011/08/weddingsbg.jpg');
}

body.styling {
    background-image: url('http://www.lookingglassstudio.ca/wp-content/uploads/2011/08/stylingbg.jpg');
}
</style>

然后在PHP中：

<?php if (is_single(array(11,24,26,28,30,36))) : ?>
<body class="weddings">
<?php else : ?>
<body class="styling">
<?php endif; ?>

Answer 4

我已经发现了这个问题的根源，我很感谢以前的评论，因为他们帮助了很多！

问题是Wordpress 3.2，以及与jQuery的潜在冲突。这些冲突导致可怕的FOUC在webkit浏览器中返回，有时甚至是IE。

没有完美的解决方案，但以下三点都有很大的帮助：

1。）在javascript调用之前放置一个空脚本调用有助于“启动”样式表，大大减少了FOUC白色闪存的持续时间。

<script type=”text/javascript”></script>

2。）降级到jQuery 1.4.4。找到here。显然问题是新版本的jQuery和WP 3.2冲突。在不影响管理功能的情况下执行此操作的方法是将以下内容添加到主题中的functions.php文件中：

    // Downgrade to jQuery 1.4.4 in order to support jQuery Tools
    function downgrade_jquery() {
    global $wp_scripts;

    // We want to use version 1.4.4 of jQuery, but it may break something in the admin so we only load it on the actual site.
    if ( !is_admin() ) :
            wp_deregister_script('jquery');
            wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', false, '1.4.4');
    endif;
    }
    add_action( 'wp_head', downgrade_jquery() );

3.使用类似的背景颜色来匹配您的图像，如上面Wesley Murch和Salman A所推荐的那样。我还没有尝试过渐进式JPEG格式，但我想这也有帮助。

该组合似乎几乎消除了Wordpress 3.2的FOUC，并提供了一个解决方案，至少在开发人员在未来版本中消除问题之前。

我想改变标题，以更准确地代表我所面临的问题。

背景图像加载缓慢

4 个答案: