Problem With a Loading Gif & Innerfade
Hi all,
I'm completely stumped (which isn't difficult, because JQuery and I don't get along well) and desperately need some help.
I have a site that utilizes the JQuery plugin, Innerfade. It pulls images from a MySQL database query, then rotates the images using JQuery. However, Firefox 3 does some weirdness when it loads the images, and I'd like to get past this by displaying a loading gif until the images completely load.
So I'm trying to finagle this using JQuery, and I'm having no luck whatsoever. I've tried a lot of things, but the closest I can get is this:
-
$(document).ready(
function(){
$("#loader").show();
$('#spirits_frame_work').innerfade({
animationtype: 'fade',
speed: 'slow',
timeout: '6000',
type: 'sequence',
containerheight: '400px',
});
$("#loader").hide();
}
);
And this doesn't work right at all. First off, it doesn't show the loader div when the page loads the first time--but once the Innerfade images go through their cycle, it starts showing the loader div as if its an image in the Innerfade cycle.
I'm sure I'm missing something incredibly obvious here, but this is killing me. Can anyone help me out? I'd really appreciate it.
The site live and failing:
http://www.mynameispj.com