jQuery Preloading -- How to fade images in instead of having them pop up

Hi there,

I have put a sort of rudimentary preloading animation together with jQuery. You can see it on my site at element17.com. As you can see, a preloading animation plays until $(window).load is called, at which time that (called '.loading') fadeOut()'s.

That seems to work fine, but you'll see that it basically fades out to transparent, at which time the images that were loading snap into existence. How can I set this up so that that preloading animation fades smoothly into the images?

HTML follows:

<div class="loading" style="height:150px; width:475px; z-index:99955; background:#333 url('plog-content/themes/diffuser/images/loading.gif') no-repeat center center;">&nbsp;</div>

<div class="slideshow">*IMAGES LOAD HERE VIA PHP*</div>

Open in new window

Please excuse the inline styles while I'm testing... :P

Thanks everyone!
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Shinesh PremrajanEngineering ManagerCommented:
You need to manipulate with medium or fast options like


Hope this helps
David S.Commented:
The issue is caused by the loading <div>s taking up the full height of their parents which have fixed heights and "overflow:hidden". When the loading <div>s are completely faded out they get "display:none", so suddenly they're not taking up any room and the slideshow <div>s snap up into view. The solution is to absolutely position the loading <div>s.
.loading {
	height: 150px;
	width: 475px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 99;
	background: #333 url(plog-content/themes/diffuser/images/loading.gif) no-repeat 50%;

Open in new window

Why are you using so many inline styles on elements that have a class?

Placing a <div> inside an <a> is invalid. You should use <span>s with "display:block" instead of all such <div>s.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SR_TechAuthor Commented:
Thanks for your help!  I have also eliminated the offending <div>s and the page now validates as well.  Thanks!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.