On page load, fadein still shows images loading - JQUERY

Hi all,

First off I will explain some of the background story as Sh0e has been nice enough to work through several threads with me on this issue.

I have a page which I want to have the contents of "#DivLayout-Fadewrapper" hidden until it is completely loaded (images etc) and then fades in "#DivLayout-Fadewrapper". So I am using the code as shown below which does work locally however when placed online, the fadein effect fires off before all the template images are loaded meaning during the fade it shows white patches which then get covered with the image once loaded.

I am only a beginner with JQUERY (previous fan of scriptaculous) and struggling to work out this issue.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="css/default.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
window.onload = function()
{
$('#DivLayout-Fadewrapper').addClass('fadein').fadeIn(2000);
}
 
</script> 
 
<script type="text/javascript">
jQuery(document).ready(function(){
          jQuery('a.FadeOutPage').click(function(){
          jQuery('#DivLayout-Fadewrapper').fadeOut(2000);
          setTimeout("nav('"+this.href+"')",2000);
          return false;
    });
});
 
function nav(href){
 location.href=href;
}</script>
 
<style type="text/css">
.fadein {display:none;}
</style>
 
</head>
 
<body>
 
<div id="DivLayout-Fadewrapper">
  <div id="DivLayout-Mainwrapper">
    <div id="DivLayout-Headwrapper"><!--Head wrapper content goes here--></div>
    <div id="DivLayout-Menuwrapper"><!--Menu wrapper content goes here--></div>
    <div id="DivLayout-Contentwrapper">
	  <div id="DivLayout-Rightcontainer">Content for  id "DivLayout-Rightcontainer" Goes Here</div>
      <div id="DivLayout-Leftcontainer">test here </div>
    </div>	
    <div id="DivLayout-Basewrapper"><!--Menu wrapper content goes here--></div>
  </div>
  <div id="DivLayout-Copyrightwrapper">
	<span>
	  W3C Standards compliant XHTML | CSS by Richard Massey<br />
	  Copyright &copy; 2008, Richard Massey, All rights reserved.
	</span>
	<a href="test.html" class="FadeOutPage">Link One</a>|
	<a href="#" class="FadeOutPage">Link Four</a>|
	<a href="#" class="FadeOutPage">Link Three</a>|
	<a href="#" class="FadeOutPage">Link Five</a>|
	<a href="#" class="FadeOutPage" style="margin-right:0">Link Six</a>
  </div>	
</div>
</body>
</html>

Open in new window

LVL 1
RichardMassAsked:
Who is Participating?
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.

sh0eCommented:
Unfortunately, this appears to be faulty behavior of FF onload.  It fires before CSS background images load.  FF bug tracker implies that the team knows about it, but are unwilling to change the behavior.  They probably don't agree with everyone else on this.
I'll create a quick hack to traverse the styles and preload images before continuing.
0
sh0eCommented:
Ok, as a quick workaround, you can insert an invisible image for each image set as background through css styles.
eg:
<img src="../images/imagesprite-01.gif" style="display:none"/>
<img src="../images/background03.gif" style="display:none"/>
<img src="../images/background01.gif" style="display:none"/>
<img src="../images/test3.gif" style="display:none"/>
<img src="../images/test.gif" style="display:none"/>
<img src="../images/test2.gif" style="display:none"/>
<img src="../images/test4.gif" style="display:none"/>
<img src="../images/arrow.gif" style="display:none"/>
0

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
RichardMassAuthor Commented:
Thank you yet again Sh0e, you truly are a life saver.
0
sh0eCommented:
Oh I forgot to mention this last time.
You may want to add as many Zones as you can to your question, and preferably more popular ones, so there are more Experts around to help you.  JavaScript is very popular, so if its JavaScript related always attach that area.
There are many Experts who focus only on certain Zones, so it is in your best interest to target as many as possible.  The max is 3.
0
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
jQuery

From novice to tech pro — start learning today.

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.