Hi Liam,
Someone else may have a better idea, but I would try one of three
things:
1) Pre-load (pre-cache) the BG image before running the code that
switches the BG image in the div is executed. You could just have the
image tag on the page in a hidden <div> or something). This wouldn't
be very semantically proper though, and there is still no guarantee
that the image will have finished loading by the time you need to
start the fade in.
2) First load the BG image in a hidden div (or set it to display:none
somehow) and give image an ID so that you can do something like this:
(not tested at all...just an example)
<script>
$("#something").click( function() {
// put jQuery code here to append() the image as a regular <img>
tag with id="myBgImage"
$("#myBgImage").load( function() { /*code here to change
background of the desired <div> and then fade it back
in*/ }).remove();
});
</script>
3) (Perhaps the best solution?). Combine your various BG images into a
single image and use the "sprite" technique to position the background
image to show only the portion of it that you want to. This may not be
possible depending on your particular layout, but it's a great
technique that I use almost everywhere. Using this approach, instead
of changing the url() of the background, you would only be changing
the background offset (the position of the background image).
Here's an article on the sprite technique if you're not already
familiar:
http://alistapart.com/articles/sprites
Good luck!
-THEO-
On Jun 18, 2:03 pm, Liam Byrne <[EMAIL PROTECTED]> wrote:
> Is there a way in jQuery to (1) set the background image of a div
> (easily done) and then (2) wait for that image to load before (3) fading
> it back in ?
>
> (1) is easily done, but I'm having problems getting (3) to wait for (2)
> to complete so that the animation is smooth.
>
> Hope that makes sense!
>
> TIA,
> Liam
