?
Solved

On page load, fadein still shows images loading - JQUERY

Posted on 2008-10-27
4
Medium Priority
?
1,407 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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

Tutorials alone can't teach real engineering

So we built better training tools.

-Hands-on Labs
-Instructor Mentoring
-Scenario-Based Tests
-Dedicated Cloud Servers

All at your fingertips. What are you waiting for?

Question has a verified solution.

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

DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
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…
Suggested Courses

770 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