Preloading Body Background Images

S.M.B.

I've been working on a site that uses large background images and I've been looking for potential solutions to help preload these images before each page is displayed.

I've had a look at some jQuery options but these only seem to help in cases such as rollovers etc?

Does anybody know of any way of doing this?

Thanks in advance.

p

There's a sneaky way of doing it by just putting in the images in img tags, and making them 1px by 1px high and moving them off screen.

There's probably a jQuery way, but that works fine.

johnny_rambo

If you want to use jquery, do the following....

var preloadImg = new Image();
$(preloadImg).load(function() {
    // Code to display page
});
preloadImg.src = "image_to_preload.jpg";

S.M.B.

Cheers, the problem is that it's the body background images so hiding them with a negative margin isn't going to help.

I've used this jQuery script to go through my CSS file and cache any images specified there.

It seems to work for all pages apart from the home page which is understandable as all my other background images are referenced in this one CSS file.

Link

p

S.M.B. wrote: »

Cheers, the problem is that it's the body background images so hiding them with a negative margin isn't going to help.

Sure it will, i've done it, give it a shot.
[HTML]
<div id="preloadedimages">
<img src="mybig1.jpg" />
<img src="mybig2.jpg" />
<img src="mybig3.jpg" />
</div>

#preloadedimages {
height: 1px;
width: 1px;
overflow: hidden;
position: absolute;
left: 100px;
}
[/HTML]
Then, whenever you do use those images as BG images in CSS, they will be loaded already from visiting the first page.
It's not pretty, but it does work.

S.M.B.

How about the first page? That's the only one I'm having a problem with now.

p

Should work, but i don't completely get what your problem is.

If you get anything together throw it online and i'll take a look.

the other suggestions posted i'm sure will work too.

Liam Byrne

p wrote: »

Then, whenever you do use those images as BG images in CSS, they will be loaded already from visiting the first page.
It's not pretty, but it does work.

If a website is operating properly (with Google indexing it correctly and directly people to the relevant page, rather than just the home page) then there is no guarantee that the visitor will have been on "the first page".

S.M.B.

p wrote: »

Should work, but i don't completely get what your problem is.

If you get anything together throw it online and i'll take a look.

the other suggestions posted i'm sure will work too.

Here is a link.

Eoin

This image is way too big - over 600kb? I've attached a copy with a smaller filesize - can you notice much of a difference in quality?

For SEO purposes, I would think that the orange box should be set as the background image to a H1 tag that contains the company name, rather than just part of the background.

Pixelcraft

Yeah there's no reason that should be 1 image. You could have that exact effect by using transparent png's for the drop shadow & a bg color div containing the logo

S.M.B.

eoin wrote: »

This image is way too big - over 600kb? I've attached a copy with a smaller filesize - can you notice much of a difference in quality?

For SEO purposes, I would think that the orange box should be set as the background image to a H1 tag that contains the company name, rather than just part of the background.

Didn't realise I hadn't optimised the image for the landing page. All the others should be smaller. It's actually a site I was asked to do a bit of contract work on but the client has decided not to run with the design (which is understandable as I found the whole layout of the site to be a bit of a mess). By the way the 'Corporate Site' link is the one that brings you into the rest of the site.

I encountered the preloading of large body background images problem while coding the site so it's more out of interest and for future reference that I'm looking for a solution.

On your second point, would google frown upon the addition of h1 and h2 tags containing the text in the background if they were to be hidden on the page using the margin property. Surely not?

S.M.B.

Pixelcraft wrote: »

Yeah there's no reason that should be 1 image. You could have that exact effect by using transparent png's for the drop shadow & a bg color div containing the logo

What advantage would doing it this way have over just the single image?

I can only see the disadvantage of trying to deal with transparency issues in older browsers?

Eoin

S.M.B. wrote: »

On your second point, would google frown upon the addition of h1 and h2 tags containing the text in the background if they were to be hidden on the page using the margin property. Surely not?

Looking again at your page - you have a H1 tag which might be more relevant, so maybe not in this case. I wouldn't hide the H1 tag though - just the text inside it.

I doubt that this would be considered spamming from an SEO point of view, and it would definitely be a plus from an accessibility point of view.

I'm not 100% sure if the embedded span tag will raise any flags, but it would work - there are probably cleaner ways of doing it:

[html]<h1><span>SAB Holding - think ahead</span></h1>[/html]

h1
{
    height: height of logo;
    width: width of logo;
}
h1 span
{
    display: none;
}

Placebo

S.M.B. wrote: »

What advantage would doing it this way have over just the single image?

I can only see the disadvantage of trying to deal with transparency issues in older browsers?

file size. Which = loading time
And better image quality.

i would recommend using z-index and slicing up that image

S.M.B.

Placebo wrote: »

file size. Which = loading time
And better image quality.

i would recommend using z-index and slicing up that image

But how does breaking 1 large image into 1 large image and a second smaller image result in decreasing the files sizes and load time?

Currently the background image is a 33kb jpg.

Using a background image and layering the logo on top results in using a 29kb jpg and a 18kb png?

Or am I missing something here?

Pixelcraft

S.M.B. wrote: »

But how does breaking 1 large image into 1 large image and a second smaller image result in decreasing the files sizes and load time?

Currently the background image is a 33kb jpg.

Using a background image and layering the logo on top results in using a 29kb jpg and a 18kb png?

Or am I missing something here?

Not really. I suggested breaking the logo/box up from the main image so the site conforms to the way a site should be constructed. As mentioned before, the logo should be a h1, the 'think ahead' can be text, the logo can be a transparent png, the gradient in the box can be done using CSS. Obviously, a lot of this will only work on modern browsers, google progressive enhancement - it's ok for the site not to look pixel perfect across all browsers.

2 images will be a larger filesize than 1 due to the headers & additional information needed, so if you disregard the above then there would be no filesize advantage to splitting.

S.M.B.

That's what I thought. I guess for SEO/Accessibility purposes I should be using a h1 and h2 tag for the logo.

Unfortunately, I was given instructions to reproduce it pixel perfect across all browsers going back as far as IE6.

Pixelcraft

Ok if you're stuck with pixel perfection lose the css3 suggestions, and the transparent png. Still think it should be separate though with heading tags, can you live without the drop shadow? If not maybe make the background in such a way that you can have a dropshadow on blue that won't look odd (rather than the transparency)

p

S.M.B. wrote: »

I encountered the preloading of large body background images problem while coding the site so it's more out of interest and for future reference that I'm looking for a solution.

I wonder actually if you can use something like jQuery to fade in a BG image once it's loaded. That would be very handy.

In the past, I generally steered away from designs like this because of the BG image issue you're having. But people do have a lot faster connections these days so maybe it's not so important anymore.

p

Pixelcraft wrote: »

Ok if you're stuck with pixel perfection lose the css3 suggestions, and the transparent png. Still think it should be separate though with heading tags, can you live without the drop shadow? If not maybe make the background in such a way that you can have a dropshadow on blue that won't look odd (rather than the transparency)

For something like this, I would actually just make the H1 tag a large invisible box that's aligned with the BG. No reason to separate the images.

If you do need to separate them out, then still no need for transparency, just make sure you align the drop shadow with the BG, so that you can't see it's separate images at all.

S.M.B.

Fading the initial image in with jQuery sounds like a good idea. The other 6 background images are all loading along with the index page now.

I use a mobile broadband dongle for testing too. I find designing/developing for those with a slow connection as important as cross-browser etc.