Fade out div over the whole site to (simulate) do a preloader with (Mootools) Jquery.

Question

I made a page, 3 cols, tableless and css formated (as it should be). Sometimes the browser doesn't put anything in its place. So I made a fake preloader in a DIV id="preloader" and a content wrapper in another DIV id="container".

First I made the whole wrapper nonexistant (not there, in opposite to visibility, that just "hides").

CSS

#container {display: none}
#preloader {display: block}

Then, with mootools, I changed their values just when the whole doc was loaded, so when the container becomes visible (block) it is ready as a whole to be skinned by the CSS (images and everything included).

SCRIPT

window.addEvent('load',function() {
$$('div#preloader').setStyle('display','none');
$$('div#container').setStyle('display','block'); });

So far so good. But as I couldn't feel happy there, I wanted to add some spice to the solution. I decided to use a fade out effect for the preloader div, or a fade in effect for the container. I thought that maybe the container has too many things inside and the fade in effect could turn into a "not so cool" effect, so I chose the preloader div to do the fade out over the container div.

Then became the troubles. I'm not a programmer, I'm a graphic designer, and even when I'm pretty good at unveiling code and shaping to my evil urges, this time I failed to understand much from the mootools documents (I find them the worst detailed and example lacking tutorials of all time), I finally came to this:

window.addEvent('load', function() {
  $$('div#container').setStyle('display','block');
  $$('div#preloader').fade('out');
        $$('div#preloader').setStyle('display','none');
 });

This works! But I need to give the preloader more time to fade so the animation runs smoothly. Indeed, that's the problem. I just had the feeling that I needed some var=myFade to be created and then give to it the parameter of duration but, I dig a lot and found nothing, specially when the instructions are for buttons clicks.

I'm asking you guys to help me sort this thing out. It'd be much apreciatted.

Answer 1

Try using Fx.Tween, starting with an opacity of 1, and tweening to 0, for the preloading div. Then, once it has finished, set display:none;.

It might look something like (untested):

    window.addEvent('load', function() {
            $$('div#container').setStyle('display','block');
            var myFx = new Fx.Tween($$('div#preloader'), {duration:2000});
            myFx.start('opacity', '0');
            $$('div#preloader').setStyle('display','none');
    });

It looks like you could also use (untested):

    window.addEvent('load', function() {
            $$('div#container').setStyle('display','block');
            $$('div#preloader').get('tween', {property: 'opacity', duration: 2000}).start(0);
            $$('div#preloader').setStyle('display','none');
    });

Each of those should last 2 seconds.

Answer 2

I worked a lot with Chris answer but I couldn't get nothing out of it. Instead I re arranged what I did before and ended with this:

window.addEvent('load', function() {
        $$('div#preloader').setStyle('display','none');
  $$('div#container').fade('hide').setStyle('display','block');
  $$('div#container').fade('in');
 });

Let's say I improved my knowledge but it's too basic for what I need. I erased the preloader as soon as the whole page is loaded, then I've hidden the container before makign it "real" with the display:block. Now is there but hidden. Then applied the fade in, asumming that for being more graphic oriented it would take longer to load and maybe would be more noticeable. BUt I don't think it have change much.

Any new idea would be much appreciated. Thanks Chris for yours.

Answer 3

Got it!!!

Here's the code!

window.addEvent('load', function() {
  $$('div#container').setStyle('display','block');
  $$('div#preloader').set('tween',{duration: 4000});
  $$('div#preloader').tween('opacity', '0');
 });

In the body of the html I got this:

<div id="preloader">lblblblb</div>
<div id="container">Here comes the real content</div>

I show the #container so I can fade the #preloader over it and I didn't need the .setStyle('display','none'); for the later cause the opcaity 0 make it non-there. I would see if this is completely true, cause I don't need the div floating all over the site "invisible".

Thanks for your previous answers. This site helped me a lot: LINK

Answer 4

First of all, using JavaScript to fix your CSS layout issues should be your very, very, very last resort.

Try to get your layout working in a web-standards browser (eg. Firefox, Chrome), so you begin with a solid base. Then try to fix the remaining (browser specific) issues using additional CSS properties (eg. display: inline for the IE6 double margin floating bug).

If you still haven't fixed your layout issue and really want to use JavaScript/MooTools, try to use it correctly:

To select a HTML element by id, use $('id'), not $$('#id'). $$ returns an array of elements, that's also why $$('div#preloader').get('tween') doesn't work. $('preloader').get('tween') works without a problem.

Next, learn about events or function chaining. Using events, you can set the display of the preloader to none after it faded out:

$('preloader').set('tween', {
  onComplete: function(){
    $('preloader').setStyle('display', 'none');
  }
}).fade(0);

Or using function chaining (the start() function supports chaining):

$('preloader').get('tween').start('opacity', 0).chain(function(){
  $('preloader').setStyle('display', 'none');
});

As you see, it's really easy. Just don't be afraid to get your hands dirty...

Answer 5

I changed from Mootools to Jquery because I needed some tricks and Mootools was too big for me to handle.

Jquery is easier to handle and learn, is more straight forward code and logic. Anyway, here's the problem, the code and solution:

The Problem: I've got a design with 3 columns, SEO, tableless, works on everybrowser, etc. But, the third column worked oddly due to the loading time+rendering online but could be something else. So, sometimes the divs didn't stay to the right and sometimes appeared down the second container. I discovered I needed to load all the images of the site before being rendered to the user and that solved the odd behaviour that I've been seeing in firefox (sometimes). The other solution was changing the wireframe for the html of the site but that is something I'm working on right now. I needed the preloader because I wanted to see the site rendering complete.

Site Code:

<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>

<head>
<title>WH</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="es-cl" />
<link rel="stylesheet" type="text/css" href="css/template_red.css" media="screen" />
<script type="text/javascript" src="js/jquery132min.js" language="javascript"></script>
<script type="text/javascript" src="js/preloadCssImages.jQuery_v5.js" language="javascript"></script>
<script language="javascript" src="js/curvycorners.js" type="text/javascript"></script>
<script type="text/javascript">
<!--

var $j = jQuery.noConflict();

function FP_preloadImgs() {//v1.0
 var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
 for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}

function FP_swapImgRestore() {//v1.0
 var doc=document,i; if(doc.$imgSwaps) { for(i=0;i<doc.$imgSwaps.length;i++) {
  var elm=doc.$imgSwaps[i]; if(elm) { elm.src=elm.$src; elm.$src=null; } } 
  doc.$imgSwaps=null; }
}

function FP_swapImg() {//v1.0
 var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
 n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
 elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_getObjectByID(id,o) {//v1.0
 var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
 else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
 if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
 for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
 f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
 for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
 return null;
}

//  JQuery stuff

    $j(document).ready(function(){
     $j.preloadCssImages({statusTextEl: '#textStatus', statusBarEl: '#status'});
    });

    $j(window).load(function () {
//   $j("#container").show();
     $j("#preloader").fadeOut(4000);
    });

// -->
</script>

</head>
<body onload="FP_preloadImgs(/*url*/'images/redset/b_hammerhead_b.gif',/*url*/'images/redset/b_blood_b.gif',/*url*/'images/redset/b_flames_b.gif',/*url*/'images/redset/b_icesmoke_b.gif',/*url*/'images/redset/b_white_b.gif',/*url*/'images/redset/b_black_b.gif',/*url*/'images/redset/men01b.png',/*url*/'images/redset/men02b.png',/*url*/'images/redset/men03b.png',/*url*/'images/redset/men04b.png',/*url*/'images/redset/men05b.png',/*url*/'images/redset/men06b.png',/*url*/'images/redset/ban_left01_b.png',/*url*/'images/redset/ban_left02_b.png',/*url*/'images/redset/ban_left03_b.png',/*url*/'images/redset/ban_leftb01_b.png',/*url*/'images/redset/ban_leftb02_b.png',/*url*/'images/redset/ban_rite01_b.png',/*url*/'images/redset/ban_rite02_b.png',/*url*/'images/redset/ban_rite03_b.png')">
    <div id="preloader" class="preloader">
        <br />
        <br />
        <img alt="Bonehead Loading..." height="100" src="images/wh_load.jpg" width="100" /><br />
        <br />
        <br />
        <br />
        <br />

        <br />
        <br />
        <br />
        <br />
        <img alt="..." height="21" src="images/loading.gif" width="32" /><br />
        <div id="statusBar"><div id="status"><div class="status"></div></div>Loading resources...</div>
        <br />
        <br />

        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <img alt="Warhammer - Loading..." height="100" src="images/bonehead_load.jpg" width="100" /></div><!--Inicio container (afirma todo)-->
    <div id="container" class="real">

    <!--// Empieza el header--><div id="header"><div id="logo"></div><br /><div id="menuybanner"><div id="bannerz">
         </div><div id="bigmenu">
          <img alt="news &amp; events" height="46" src="images/redset/men01a.png" width="68" id="img7" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img7',/*url*/'images/redset/men01b.png')" /><img alt="band history" height="46" src="images/redset/men02a.png" width="68" id="img8" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img8',/*url*/'images/redset/men02b.png')" /><img alt="metla music" height="46" src="images/redset/men03a.png" width="68" id="img9" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img9',/*url*/'images/redset/men03b.png')" /><img alt="multimedia" height="46" src="images/redset/men04a.png" width="68" id="img10" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img10',/*url*/'images/redset/men04b.png')" /><img alt="onstage" height="46" src="images/redset/men05a.png" width="68" id="img11" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img11',/*url*/'images/redset/men05b.png')" /><img alt="support us" height="46" src="images/redset/men06a.png" width="68" id="img12" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img12',/*url*/'images/redset/men06b.png')" /></div></div></div><!--//Termina el header-->
    <div id="wrap1"><!-- Inicio #container2 este sostiene el container3 (barra izquierda y contenido central) y las barra derecha-->
    <div id="container2">
    <!-- Inicio #container3 este sostiene la columna izquierda y el body posicionado-->
    <div id="container3">
    <!-- Inicio #content el quie lleva el contenido-->
    <div id="content">
        <div id="panelcentro"><div id="pc-inside">
         <img alt="WH" height="212" src="images/test2mid.gif" width="513" /></div></div>
        <div class="cm-title">Contenido</div><div class="base">

        <p>Aliquam elemenñum commodo augue, at ornare sapien hendrerit at. Maecenas nuñc sapien, commodo elñifend dictum vel, aliquet in magna. Nam posuere tortor in ligula tincidunt placerat. Nulña tempor pulvinar leñtus, et eleifend massa cursus ñn. In laoreet libero tempor lectus accumsan molestie. Maecenas faucibus felis nisi. Praesent volutpat liberñ a urna ullamcorper ñodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing ñlit. Curabitur mattis semper mi; ac suscipit nibh venenatis a. Quisque libero ante, malesuada in tincidunt at, suscipit nec augue. Maecenas laoreet, lacus laoreet molestie aliquañ, enim mauris fañcibus lacus, et mollis mañsa velit eu sem. Integer nec neque noñ felis dignissim semper. Proin ac magna at turpis aliquet varius vitae at diam! Etiam posuere blandit est. Quisque hendrerit, justo vel consequat rutrum, leo liberñ viverra dolor, vel ñristique libero felis in justo.</p>
        <p>Class aptent taciti soñiosqu ad liñora torquenñ ñer conubia nostra, per inceptos himenaeos. Fusce risus turpis, tempus eget commodo eu, convallis at orci! Quisque neque velit, pharetña a condimentum quis, pellentesque et velit. Nunc molesñie felis nisl, porttitor pulvinar iñsum. Lorem ipsum dolñr sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Sed non tellus sit amet mñuriñ scelerisque congue quis vel dolor. Vestibulum eleifend, lorem a placerat ñursus, nulla est adipiscing elit, sed blandit nibh lectus et leo. Nullam aliquam, turpis nec fermentum feñmentum; eros nisi ultricies mauris, et interdum risus diañ non arcu. Etiañ vel velit neque. Etiam vitae arcu in turpis interdum mattñs ñed vel lorem. Phasellus sed preñium libero. Aliquam ñrat volutpat. Suspendisse ñt justo pñrus. Nunc sagittis tincidñnt erañ ut laoreet. Donec cñndimentum congue placerat. Etiam et arcu neque.</p>
        <p>Cras non pulvinar ligula. Aliquam elementum auctor magna in bibendum? Aenean euismod pellentesque sem et coñdimentum. Proin luctus nisl sit amet lorem imperdiet id viverra nibh mattis. Quisque id dolor ac nulla tristique aliquet a vel augue. Etiam urna quam; sollicitudin ac ullamcorper et, venenatis a tortor. Curabitur dapibus quam ullamñorper lectus interdum auctor! Nulla eget turpis ac dolor dignissim sagittis a at est? Ut in tincidunt elñt! Sed gravida, rñsus ac sagittis elementum, mañna turpis porta nisl, tincidunt susñipit massa justo id tellus. Pellentesque faucibus velit sed felis fermentñm aliquet eget quis lorem. Sed cursus libñro sed ligula euismod eu lacinia tellus suscipit. Aliquam pharetra, odio neñ suscipit molestie, dui felis pñrttitor feliñ, a eleifend metus neque in diam. Aeneñn tristique purus varius tortor mattis porta. Sñd vel diam erat, et auñtor nulla.</p>
    </div>
    </div>
    <!--//Fin content-->
    <!--//Inicio barra lateral izquierda-->
    <div id="sidebarLT">
        <!--<div class="bg"><div class="tl"><div class="br"><div class="trc"><div class="blc">
        asdfasdasd
        </div></div></div></div></div>-->

        <img id="img13" alt="WH-Radio" height="65" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img13',/*url*/'images/redset/ban_left01_b.png')" src="images/redset/ban_left01_a.png" width="178" /><br />

        <img id="img14" alt="WH-Market" height="65" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img14',/*url*/'images/redset/ban_left02_b.png')" src="images/redset/ban_left02_a.png" width="178" /><br />
        <img id="img15" alt="WH-Contact" height="65" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img15',/*url*/'images/redset/ban_left03_b.png')" src="images/redset/ban_left03_a.png" width="178" /></div>
    <div id="sidebarLM">
        <div class="lm-title">Social Bookmarking</div><div class="base-lm">
           <img alt="Social Bookmarks" height="38" src="images/socialtest.jpg" width="146" />
        </div>
    </div>
    <div id="sidebarLB">
        <img id="img16" alt="Battlerage" height="65" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img16',/*url*/'images/redset/ban_leftb01_b.png')" src="images/redset/ban_leftb01_a.png" width="178" /><br />
        <img id="img17" alt="Raining" height="65" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img17',/*url*/'images/redset/ban_leftb02_b.png')" src="images/redset/ban_leftb02_a.png" width="178" /></div><!--//Fin barra lateral izquierda-->

    </div><!--//Fin container3-->
    <!--//Inicio barra lateral derecha-->
    <div id="sidebarR">
    <div id="sidebarRT">
        <div class="rm-title">Events</div><div class="base-rm">
            <p>2009 07 03<br />Próxima fecha con Raining y Timecode en el Metalkólicos Bar.</p>
         <p>2009 07 03<br />Próxima fecha con Raining y Timecode en el Metalkólicos Bar.</p>
         <p>2009 07 03<br />Próxima fecha con Raining y Timecode en el Metalkólicos Bar.</p></div>

        </div>
    <div id="sidebarRM">
        <img alt="WH-Fans Sign In!" height="65" src="images/redset/ban_rite01_a.png" width="228" id="img18" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img18',/*url*/'images/redset/ban_rite01_b.png')" />
        <img alt="WH-Next Shows" height="65" src="images/redset/ban_rite02_a.png" width="228" id="img19" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img19',/*url*/'images/redset/ban_rite02_b.png')" />
        <img alt="WH-Last Show" height="65" src="images/redset/ban_rite03_a.png" width="228" id="img20" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img20',/*url*/'images/redset/ban_rite03_b.png')" /></div>
    <div id="sidebarRB">
        <div class="rm-title">Poll</div><div class="base-rm">
            <p>Where would you like to see WH?<br />1- Valparaíso.<br />

         2- Chillán<br />3- Temuco<br />4- Valdivia<br />5- La Serena<br />6- Iquique</p>
        </div>
    </div>
    </div>
    <!--//Fin barra lateral derecha-->
    </div><!--//FIN container2--></div>
    <!-- Topslide --><div id="topslide"><div id="headtop">contenidos</div><div id="top_navlist">inicio&nbsp;&nbsp;&nbsp;contacto&nbsp;&nbsp;&nbsp;mapa del sitio&nbsp;&nbsp;&nbsp;&nbsp;enlaces&nbsp;&nbsp;&nbsp;&nbsp;buscar</div><div id="themeselector"><div id="blood">

          <img alt="Themes" height="13" src="images/redset/tit_themes.gif" width="44" /><img alt="bloodcrushed" height="13" src="images/redset/b_blood_a.gif" width="72" id="img2" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img2',/*url*/'images/redset/b_blood_b.gif')" /><img alt="firesmoke" height="13" src="images/redset/b_flames_a.gif" width="72" id="img3" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img3',/*url*/'images/redset/b_flames_b.gif')" /><img id="img4" alt="icysmoke" height="13" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img4',/*url*/'images/redset/b_icesmoke_b.gif')" src="images/redset/b_icesmoke_a.gif" width="72" /><img id="img5" alt="whitenblack" height="13" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img5',/*url*/'images/redset/b_white_b.gif')" src="images/redset/b_white_a.gif" width="72" /><img id="img6" alt="blacknwhite" height="13" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img6',/*url*/'images/redset/b_black_b.gif')" src="images/redset/b_black_a.gif" width="72" /></div><div id="flames"><img alt="Themes" height="13" src="images/redset/tit_themes.gif" width="44" /><img alt="bloodcrushed" height="13" src="images/redset/b_blood_a.gif" width="72" id="img2v" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img2v',/*url*/'images/redset/b_blood_b.gif')" /><img alt="firesmoke" height="13" src="images/redset/b_flames_a.gif" width="72" id="img3v" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img3v',/*url*/'images/redset/b_flames_b.gif')" /><img id="img4v" alt="icysmoke" height="13" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img4v',/*url*/'images/redset/b_icesmoke_b.gif')" src="images/redset/b_icesmoke_a.gif" width="72" /><img id="img5v" alt="whitenblack" height="13" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img5v',/*url*/'images/redset/b_white_b.gif')" src="images/redset/b_white_a.gif" width="72" /><img id="img6v" alt="blacknwhite" height="13" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img6v',/*url*/'images/redset/b_black_b.gif')" src="images/redset/b_black_a.gif" width="72" /></div><div id="icesmoke"><img alt="Themes" height="13" src="images/redset/tit_themes.gif" width="44" /><img alt="bloodcrushed" height="13" src="images/redset/b_blood_a.gif" width="72" id="img2w" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img2w',/*url*/'images/redset/b_blood_b.gif')" /><img alt="firesmoke" height="13" src="images/redset/b_flames_a.gif" width="72" id="img3w" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img3w',/*url*/'images/redset/b_flames_b.gif')" /><img id="img4w" alt="icysmoke" height="13" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img4w',/*url*/'images/redset/b_icesmoke_b.gif')" src="images/redset/b_icesmoke_a.gif" width="72" /><img id="img5w" alt="whitenblack" height="13" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img5w',/*url*/'images/redset/b_white_b.gif')" src="images/redset/b_white_a.gif" width="72" /><img id="img6w" alt="blacknwhite" height="13" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img6w',/*url*/'images/redset/b_black_b.gif')" src="images/redset/b_black_a.gif" width="72" /></div><div id="white"><img alt="Themes" height="13" src="images/redset/tit_themes.gif" width="44" /><img alt="bloodcrushed" height="13" src="images/redset/b_blood_a.gif" width="72" id="img2x" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img2x',/*url*/'images/redset/b_blood_b.gif')" /><img alt="firesmoke" height="13" src="images/redset/b_flames_a.gif" width="72" id="img3x" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img3x',/*url*/'images/redset/b_flames_b.gif')" /><img id="img4x" alt="icysmoke" height="13" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img4x',/*url*/'images/redset/b_icesmoke_b.gif')" src="images/redset/b_icesmoke_a.gif" width="72" /><img id="img5x" alt="whitenblack" height="13" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img5x',/*url*/'images/redset/b_white_b.gif')" src="images/redset/b_white_a.gif" width="72" /><img id="img6x" alt="blacknwhite" height="13" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img6x',/*url*/'images/redset/b_black_b.gif')" src="images/redset/b_black_a.gif" width="72" /></div><div id="black"><img alt="Themes" height="13" src="images/redset/tit_themes.gif" width="44" /><img alt="bloodcrushed" height="13" src="images/redset/b_blood_a.gif" width="72" id="img2y" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img2y',/*url*/'images/redset/b_blood_b.gif')" /><img alt="firesmoke" height="13" src="images/redset/b_flames_a.gif" width="72" id="img3y" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img3y',/*url*/'images/redset/b_flames_b.gif')" /><img id="img4y" alt="icysmoke" height="13" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img4y',/*url*/'images/redset/b_icesmoke_b.gif')" src="images/redset/b_icesmoke_a.gif" width="72" /><img id="img5y" alt="whitenblack" height="13" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img5y',/*url*/'images/redset/b_white_b.gif')" src="images/redset/b_white_a.gif" width="72" /><img id="img6y" alt="blacknwhite" height="13" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img6y',/*url*/'images/redset/b_black_b.gif')" src="images/redset/b_black_a.gif" width="72" /></div></div><div id="hammerhead">
          <img alt="Hammerheads" height="10" src="images/redset/b_hammerhead_a.gif" width="88" id="img1" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img1',/*url*/'images/redset/b_hammerhead_b.gif')" /></div><!-- End Topslide --></div><!-- Inicio #breadcrumbs-->
    <div id="migas">inicio - jdhasodhs - Breadcrumbs</div><!-- fin #breadcrumbs--><!--//incio prefooter-->
    <div id="prefooter">
        <div id="pf1"><div class="pf-t">About Warhammer</div><div class="pf-b">- 
           Faq<br />- Website Support<br />- Media Support<br />- Free 
           Music Downloads<br />
               - Suscribe</div></div><div id="pf2"><div class="pf-t">Find Warhammer</div><div class="pf-b">- 
           Myspace<br />

           - Facebook<br />
           - Lastfm<br />
           - Youtube<br />
           - Forums</div></div><div id="pf3"><div class="pf-t">More Warhammer</div><div class="pf-b">
          -&nbsp; Contact<br />

          - Media<br />
          - Advertisement<br />
          - Contests &amp; Promotions<br />
          - Bonehead</div></div><div id="pf4"><div class="pf4-t"></div><div class="pf4-b">
           <img alt="Bonehead" height="97" src="images/bh-logo.jpg" width="54" class="aleft" /><br />
           </div></div></div><!--//FIN prefooter--><!--//incio footer-->

    <div id="footer">
        privacy&nbsp;&nbsp;&nbsp; contents&nbsp; /&nbsp; Warhammer &amp; WH&nbsp; /&nbsp; CC2009 - Santiago, Chile</div><!--//FIN footer-->
    </div><!--//Fin container-->

    </body></html>

Solution1: I decided just to trick the browser to not render the "real" site, until it would had finished loading the images. Using style="display:none" I keep the browser from rendering the parent div and therefor, the elements inside. When the loading time is ready, I would show the div and as it is loaded completely, it would render ok. I needed something to cover the process so the user would know that the system is working while he waits a couple of seconds, so I made a div that would cover the whole site with some blabla about the loading process.

Mootools:

window.addEvent('load', function() {
$('container').setStyle('display', 'show');
$('preloader').get('tween').start('opacity', 0).chain(function(){
  $('preloader').setStyle('display', 'none');
});

}).fade(0);
}

Note that in this solution I still don't have control over the time the transition takes. The wrong one where I did this is in another answer but I don't know how to set in with this new situation. Any way, I decided that these was just a trick and I needed something that realy preloads the images to display the site at once.

Solution2: I used the same idea as before but I realized that I didn't needed to display: none the container div if ti was veiled with a preloader div. In the other hand, IE gave me some errors because when I used display: none and the inner divs used a script for rounding corners, the unrendered divs turned IE crazy. Fixed that, I used Jquery and everything worked fine.

Jquery:

var $j = jQuery.noConflict();
    $j(document).ready(function(){
         $j.preloadCssImages({statusTextEl: '#textStatus', statusBarEl: '#status'});
        });

        $j(window).load(function () {
         $j("#preloader").fadeOut(4000);
        });

The first instructions, were for avoiding problems with mootools.

The second line was for activating the preloading of images just as the document is ready. It applies also a status bar to a div with the id indicated in satusBarEl. The tool for doing this could be downloaded from here @filamentgroup

The final part make a fadeOut of 4 seconds as soon as the whole document+images is ready. It applies to the #preloader div.

That's it. It works fine in every browser I've tested.