Well done Eric.
Your script tested here and do the job.
Nice solution.
I'd like to suggest the following:
1-) Set a time for the animation in order to see the image growing on the
screen:
animate({opacity:1}, 2000);
2-) Leave in place the image defined via CSS and hide it via script.
(Unubstrutive script principle).
$('body').css('backgroundImage', 'none');
------------------------------------------------------------
Well, I'm not sure you can do it from CSS, but the following should
work:
var i = new Image();
i.src = "img/background.jpg"; // define the image you want to load
here
$(i).load(function () {
$("<div/>").css({
opacity:0,
position:"absolute", // use as needed
top:0, // use as needed
left:0, // use as needed
height:i.height,
width:i.width,
backgroundImage: "url(" + i.src + ")"
}).appendTo("body").animate({opacity:1});
});
-Eric
On Oct 15, 12:13 pm, gjhames <[EMAIL PROTECTED]> wrote:
inwww.gewton.com,
when the background loads, fade in.
Just that.
The problem is: the background is defined in css. Is not an image tag.
And souldn't be.
On Oct 12, 3:40 pm, Eric <[EMAIL PROTECTED]> wrote:
> I'm gonna go out on a limb and say, "no".
> But you might be able to work with the browser cache by loading the
> bg.jpg in a hidden div. If that causes the image to be cached by the
> browser, then you can show the background after a significant delay
> and it *should* appear instantaneously.
> Not tested, sorry.
> If you describe the effect you're trying to obtain, perhaps we can
> find another solution?
> On Oct 12, 11:44 am,gjhames<[EMAIL PROTECTED]> wrote:
> > It's possible to callback a function when a background image of an
> > element, defined in css, finish to loads? Example:
> > div#mydiv {
> > background-image: url(files/bg.jpg);
> > }
> > Thanks.
