Neverside

Preloading Layout Images

Hi, I am after something that will preload images for my layout at the following site... I have used one but it doesnt seem to work. Could someone please help me out here.

http://www.addictivedesign.co.nz/schoolballdj/index.html

Chris

___________________

my blog<<< CHECK IT OUT

I love using jQuery for my Javascript nowadays, there's a really nice example of how to preload images using this library here:

http://www.texotela.co.uk/code/jquery/preload/

jQuery can be found here: http://jquery.com

___________________

Professional Geek

Do it with CSS!

Code:

background-image: url("image.png");
background-repeat: no-repeat;
background-position: -1000px -1000px;

you could apply that to some element and have it load the image out of sight. BAM, image cached.

many tuts on google: http://www.google.com/search?q=css+preload+images

___________________

That's not useful preloading though riah, how do you know when to move the image into position using your example.

___________________

Professional Geek

Originally posted by flyingbuddha:

That's not useful preloading though riah, how do you know when to move the image into position using your example.

Preloading is simply loading images into the browser cache before they are seen on the page. That's what it does. If you are looking for image swapping, you can also use CSS solutions for that:

You would have one image file that contains both states of the image. So it's regular state and hover state, let's say, would be side by side in the image. You would then make the image the background of a link. Only the regular half of the image would appear by default if the link is sized correctly, then you could style a:hover with the new background position to reveal the second half of the image. Since its all one image file, preloading isn't even an issue!

example, assuming an image with regular/hover states laid side by side:

Code:

a:link, a:visited, a:active {
  width: 50px;
  height: 24px;
  background: url(someimg.png) no-repeat;
}

a:hover {
  width: 50px;
  height: 24px;
  background: url(someimg.png) no-repeat;
  background-position: -50px; /* scoot over to reveal other state */
}

*untested code, but that's the gist... would probably need "display: block;" in the style for those links..

For more advance swapping, like switching some arbitrary image on the page by doing some action elsewhere, yeah you'd need JavaScript. But loading a JavaScript framework just to do image caching is unecessary bandwidth. jQuery is great if you want to do some DOM manipulation, though.

___________________

The hover idea is different to preloading images for your site, you're talking about a specific item on the page (the nav in this case), it's well covered by A List Apart years ago, I believe the article was called something like 'Kiss of Death' or 'Sliding Doors', something along those lines.

I kinda understand what you're saying about preloading with CSS, but doing it with the method you suggested, you're not actually doing anything more than making two requests to the same file -once when load the image in with the css, and then again when calling it in with the image tag. I guess you could argue that the method I pointed out with JS is doing the same, but at least you can code in a callback function to tell you when your images are done loading.

___________________

Professional Geek

Hmm, yeah using the first CSS method above everything will be loaded while the page loads (even before javascript), which should be fine unless you're preloading many huge images. I'm not sure what the use of a callback would be for his original request, though, unless I missed something. If a callback or dynamic loading is necessary (like for an image slideshow), go with the scripting route for sure. If it's not, avoid relying on scripting. (JS can be blocked, frameworks slow page loads)
/2cents

btw, making two request to the same file is preloading. the first request is preemptive! The JS code is, infact, doing the same. ;]

___________________