Hi Eric,
The browser will replace the image first before loading it. What you can do
to preload the image is as follows:
var newBackgroundImage = '/new/image/url.png';
$('<img />')
.attr('src', newBackgroundImage)
.bind('load', function() {
$('div').css('background-image', 'url(' + newBackgroundImage + ')');
});
This starts by creating a new image element and setting the source of it to
the background image which will start loading it in the browser. Then we
bind to the image's load event which is triggered when the image has
finished loading. In the load callback function you can then set the css
background image of your div and the image will already be in the browser's
cache and load instantly.
Cheers,
- Jonathan
http://jqueryminute.com
On Mon, Oct 5, 2009 at 2:25 AM, Erock <ethetenniss...@gmail.com> wrote:
>
> My question is, if I have one image as the background of a div, and I
> set the background of that div to another image, will html load the
> new image before replacing the old one or replace the old image with
> something ugly (say just plain white) and then load it.
>
> The reason I'm asking is, because my site isn't hosted anywhere, it's
> hard to tell what will happen on a non-local connection when the
> images actually have to be loaded.
>
> Thanks
> Eric
>
