背景图片加载缓慢

发布于 2024-11-29 03:55:21 字数 912 浏览 1 评论 0原文

我有一个网站，其背景图像可根据窗口大小调整大小。这是通过在正文中放置和一些自定义 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 条件语句，也会出现问题。当更改为背景图像时会出现问题。

原文

I have a site utilizing a background image that resizes to the window's size. This is achieved by placing an <img> in the body, and some custom CSS ( Technique #2 ).

I use a simple conditional statement in the header to determine which image to display:

<?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; ?>

My problem is, the image reloads every time I refresh or navigate somewhere else. This results in a flash of white. See the website here!

I reckon the php script calls the image each time, resulting in the 'flash'.

Any way around this? Ways to make the image cache and not reload each time?

EDIT

I believe the issue is a FOUC problem. Will flash the background color (default white) when refreshed, causing flashes. FOUC fixes don't seem to help.

Issue occurs even with PHP conditional statement removed. Issue occurs when <img> is changed to background-image.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

黎歌 2024-12-06 03:55:21

我不久前注意到这个问题，但希望您能得到对您有用的答案。

鉴于到目前为止没有什么对你有用，我有一个建议：当你保存 .jpg 文件（大背景图像）时，如果可能的话，你可能希望将它们保存为“渐进”格式。

http://en.wikipedia.org/wiki/JPEG
还有一种隔行“Progressive JPEG”格式，其中数据
被压缩为多通道，细节逐渐提高。这
非常适合下载时显示的大图像
通过慢速连接，可以在接收后进行合理的预览
仅部分数据。然而，渐进式 JPEG 并不像
广泛支持，甚至一些确实支持它们的软件（例如
（如某些版本的 Internet Explorer）仅显示图像一次
已完全下载。

它不是从上到下以一行方式加载图像，而是“逐渐”变得更清晰且像素化更少，因此您不会看到 FOUC ，而其后面的背景可见。

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

回复收藏 0 原文

零度° 2024-12-06 03:55:21

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

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

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

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

回复收藏 0 原文

别在捏我脸啦 2024-12-06 03:55:21

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

Use CSS instead.

<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>

Then in PHP:

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

回复收藏 0 原文

鹿港巷口少年归 2024-12-06 03:55:21

我已经发现了问题的根源，并且我很感谢以前的评论，因为它们提供了巨大的帮助！

问题是Wordpress 3.2，并且与jQuery 存在潜在冲突。这些冲突导致可怕的 FOUC 在 webkit 浏览器（有时甚至是 IE）中回归。

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

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，并提供了一个解决方案，至少在开发人员在未来版本中消除该问题之前是这样。

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

I've discovered the source of the issue, and I appreciate previous comments as they have helped immensely!

The problem is Wordpress 3.2, and underlying conflicts with jQuery. These conflicts result in the return of the dreaded FOUC in webkit browsers and sometimes IE.

There is no perfect solution, but all three of the following have greatly helped:

1.) Placing an empty script call right before the javascript call helps 'kickstart' the stylesheet, greatly reduces duration of FOUC white flash.

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

2.) Downgrading to jQuery 1.4.4. Found here. Evidently the issue is with newer versions of jQuery and WP 3.2 conflicting. A way to do this without affecting admin functions is to add the following to the functions.php file in your theme:

    // 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.) Utilizing a similar background color to match your image, as recommended above by Wesley Murch and Salman A. I haven't tried progressive JPEG format yet, but I imagine this would help as well.

The combination seems to almost eliminate the FOUC for Wordpress 3.2, and provides a solution, at least until developers eliminate the problem in future versions.

I'd like to alter the title to more accurately represent the problem I was facing.

回复收藏 0 原文

~没有更多了~