Solved

On page load, fadein still shows images loading - JQUERY

Posted on 2008-10-27
4
1,400 Views
Last Modified: 2010-05-18
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

0
Comment
Question by:RichardMass
  • 3
4 Comments
 
LVL 16

Expert Comment

by:sh0e
Comment Utility
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
 
LVL 16

Accepted Solution

by:
sh0e earned 500 total points
Comment Utility
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
 
LVL 1

Author Comment

by:RichardMass
Comment Utility
Thank you yet again Sh0e, you truly are a life saver.
0
 
LVL 16

Expert Comment

by:sh0e
Comment Utility
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

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now