背景图片加载缓慢

Question

背景图片加载缓慢

3

我有一个网站，其中利用了一张随窗口大小调整的背景图片。实现这个效果的方法是在页面主体中放置一个<img>标签，并使用一些自定义的CSS（技巧＃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; ?>

我的问题是，每次刷新或导航到其他地方时，图片都会重新加载。这会导致白屏闪烁。请查看此处！我认为php脚本每次调用图像，导致“闪光”。

有什么方法可以避免这种情况？有什么方法可以使图像缓存，而不是每次重新加载？

编辑

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

即使删除了PHP条件语句，问题仍然存在。在将<img>更改为background-image时，问题仍然存在。

- Sirwilliam85

我在你的问题中没有看到 ? ... 问题在哪里？ - Salman A

@SalmanA：你说得对，Sirwilliam的第一次编辑后问题确实丢失了，我已经把它加回来了，也许你可以提供一个答案。 - Wesley Murch

@Sirwilliam85：你在测试IE浏览器吗？ - Salman A

我在Safari和Chrome中遇到了这个问题，但我的客户在IE中遇到了这个问题，而我还无法复制它。 - Sirwilliam85

4个回答

1

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

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

还要注意，当您点击刷新时，某些浏览器会从头开始请求所有资源。现代浏览器（我在FF4上检查过）将发送一个If-Modified-Since头，合理的服务器将仅返回未修改响应，因此不会出现闪烁。

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

- Salman A

0

请使用 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; ?>

- Percy

谢谢您的回复！这是一个好的解决方案，实际上可能会起作用。唯一的问题是，我有一个@media screen类型（如技术2中所示），以防止图像过小。这需要一个img，而不是背景图像。因此，我希望找到一种方法，在每次刷新时都可以保持img不重新加载。不过我可能会尝试您的解决方案。 - Sirwilliam85

我认为问题是FOUC问题。出现了未经样式处理的内容闪烁 (即img.bg的背景颜色)。到目前为止，我能想到的唯一解决方案是将img类的背景颜色更改为接近的颜色。这不是理想的解决方案。 - Sirwilliam85

0

我已经找到了问题的根源，非常感谢之前的评论，它们帮助了我很多！

问题出在WordPress 3.2上，与jQuery存在冲突。这些冲突导致在Webkit浏览器和有时IE中出现可怕的FOUC。

没有完美的解决方案，但以下三种方法都大大有所帮助：

1.) 在javascript调用之前放置一个空脚本调用可以帮助“启动”样式表，大大减少FOUC白色闪烁的持续时间。

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

2.) 降级到jQuery 1.4.4。在这里找到。显然，问题出现在较新版本的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，并提供了一个解决方案，至少在开发人员在未来版本中消除该问题之前。

我想修改标题以更准确地表示我遇到的问题。

- Sirwilliam85

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Wesley Murch · Accepted Answer

我注意到这个问题很久了，但希望你会得到一个适合你的答案。

既然到目前为止没有任何解决方案对你有用，我有一个建议：当保存你的 .jpg 文件（大背景图片）时，如果可能的话，你可以选择保存在“渐进式”格式中。

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

还有一种交错的“渐进式 JPEG”格式，其中数据按照逐步提高的细节进行多次压缩。这非常适合在慢速连接下载时显示的大型图像，允许在仅接收部分数据后获得合理的预览。然而，渐进式 JPEG 并不如普通 JPEG 格式被广泛支持，即使一些支持它们的软件（如某些版本的 Internet Explorer）也只能在完全下载图像后才能显示。

与从顶部到底部按行加载图像不同，“渐进式”方式将逐步变得更清晰、更少有像素化，因此你就不会在背景可见时过度看到 FOUC。

此外，请确保您提供的背景颜色不会与图像形成强烈对比，并尝试尽可能压缩文件大小，以符合您的设计要求。