Solved

On page load, fadein still shows images loading - JQUERY

Posted on 2008-10-27
4
1,402 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
ID: 22819125
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
ID: 22819324
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
ID: 22826838
Thank you yet again Sh0e, you truly are a life saver.
0
 
LVL 16

Expert Comment

by:sh0e
ID: 22827029
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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)

932 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

11 Experts available now in Live!

Get 1:1 Help Now