Background image loading slowly_问答_开发者_运维开发者技术经验分享

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 开发者_StackOverflow中文版with PHP conditional statement removed. Issue occurs when <img> is changed to background-image.

I noticed this question a while ago but hoped you'd get an answer that worked for you.

Seeing as nothing has worked for you so far, I have one piece of advice: When you save your .jpg files (the big background images), you might want to save them in "progressive" format if possible.

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.

Instead of loading the image in a line from top to bottom, it will instead "progressively" become clearer and less pixelated, so you won't see the FOUC as much with the background visible behind it.

Besides this, make sure you provide a background color that won't heavily contrast the image, and try to compress the file size as much as your design can withstand.

I checked your website and found everything to be working as expected. When the browser requests the page with an empty cache, the image will take a few seconds to download. When you navigate to any other page of the website, the browser fetches the image from the cache -- I do not see any flash on FF4, nor I see the browser requesting the stylingbg/weddingsbg image more than once per session.

If you notice that the image is loaded every time you visit the page then probably your browser cache is disabled (or incorrectly configured). The server does not seem to send the Expires header; explicitly specifying an the expires header might help in certain cases.

Also note that some browsers request all resources from the scratch when you hit refresh. Modern browsers (I checked on FF4) will send an If-Modified-Since header, a sensible server will only return a Not Modified response hence no flickering.

Apart from that, I suggest that you add a CSS background color to your page that matches the tone of the background image. This helps in situations when images are disabled or take long time to load. Also consider @Wesley's suggestion about using progressive images. Your current image loads from top to bottom. You can improve the user's experience by converting the image to progressive JPEG.

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

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.