Question

I’ve gotten myself into a jiffy here.
I’m building a site with a loaded background on each page (even though i’m compressing these to less than 250k, i’m dealing with super long load times with all the other images being loaded on each page. My first attempt to deal with this (especially on the iPhone) was to precache or preload these backgrounds, but the lag is still too long with any type of wireless connect, so my goal here is to load a smaller version of the background for different devices.
I’m hoping someone here can help me find some type of solution.

Currently I’m loading backgrounds through an if (is_page()) elseif (is_page()) statement with the javascript for ez bg resize passing the image for each page.

<?php
if( is_page('About') ) { $img = 'images/img1.jpg'; }
elseif( is_page('Home') ) { $img = 'images/img2.jpg'; }
elseif( is_page('Page_Name') ) { $img = 'images/img3.jpg'; }
elseif( is_page('Videos') ) { $img = 'images/img4.jpg'; }
else { $img = 'images/img5.jpg'; }
?>
<script type="text/javascript">
$("body").ezBgResize({
    img     : "<?php echo $img; ?>",
    opacity : 1,
    center  : true
});
</script>

What i’d like to do is include some type of variable that says
“If is this page, show this image, if is iphone / ipad version, show this image”

Answer 1

You should definitely do this client-side, because you have access to the actual screen size via Javascript, instead of doing user-agent sniffing. Especially if you rely on Javascript for your background anyway, using ezBgResize.

You can check the screen resolution of the device and then have ezBgResize use a high or low resolution version of the image. Check out the random background example for ezBgResize and this post on Javascript media queries for inspiration.

It could go like this:

/* This is an example for just one page, expand to your needs */

// Save the two (or more) different size image file names
var aboutPageBackgrounds = ["image1high.jpg", "image1low.jpg"];

// Check if we are on the about page (assuming an id is set on some element)
if( $("#aboutpage").length ) {
    // Use the high res version by default
    var image = aboutPageBackgrounds[0];

    // Switch to the low res version if the screen is small
    if( screen.width < 600 ) {
        image = aboutPageBackgrounds[1];
    }

    // Call ezBgResize with the resulting image path
    $("body").ezBgResize({
        img     : image,
        opacity : 1,
        center  : true
    });

}