Solved

On page load, fadein still shows images loading - JQUERY

Posted on 2008-10-27
4
1,403 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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

810 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