• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 440
  • Last Modified:

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!
1 Solution
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.
SR_TechAuthor Commented:
Thanks for your help!  I have also eliminated the offending <div>s and the page now validates as well.  Thanks!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now