Dissolvenza div su tutto il sito per (simulare) fare un preloader con (Mootools) Jquery

https://stackoverflow.com/questions/1050179

20-08-2019
|

Domanda

Ho creato una pagina, 3 cols, senza tabl e css formata (come dovrebbe essere). A volte il browser non mette nulla al suo posto. Quindi ho creato un falso preloader in un DIV id = & Quot; preloader & Quot; e un wrapper di contenuto in un altro ID DIV = " container " ;.

Per prima cosa ho reso inesistente l'intero wrapper (non lì, al contrario della visibilità, che solo " nasconde ").

CSS

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

Quindi, con i mootools, ho cambiato i loro valori proprio quando è stato caricato l'intero documento, quindi quando il contenitore diventa visibile (blocco) è pronto come un intero per essere scuoiato dal CSS (immagini e tutto incluso).

SCRIPT

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

Finora tutto bene. Ma poiché non potevo sentirmi felice lì, volevo aggiungere un po 'di pepe alla soluzione. Ho deciso di utilizzare un effetto di dissolvenza per il div del preloader o un effetto di dissolvenza per il container. Ho pensato che forse il contenitore ha troppe cose dentro e la dissolvenza in effetti potrebbe trasformarsi in un & Quot; non così cool & Quot; effetto, quindi ho scelto il div del preloader per eseguire la dissolvenza sul div contenitore.

Quindi sono diventati i problemi. Non sono un programmatore, sono un graphic designer e anche quando sono abbastanza bravo a svelare il codice e dare forma ai miei malvagi impulsi, questa volta non sono riuscito a capire molto dai documenti di mootools (li trovo i peggiori dettagliati ed esempio privo di tutorial di tutti i tempi), sono finalmente arrivato a questo:

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

Funziona! Ma devo dare al preloader più tempo per svanire in modo che l'animazione funzioni senza intoppi. In effetti, questo è il problema. Ho avuto la sensazione di aver bisogno di creare una var = myFade per poi creare il parametro di durata ma, ho scavato molto e non ho trovato nulla, specialmente quando le istruzioni sono per i clic sui pulsanti.

Sto chiedendo a voi ragazzi di aiutarmi a risolvere questa cosa. Sarebbe molto apprezzato.

Soluzione

Prima di tutto, usare JavaScript per risolvere i problemi di layout CSS dovrebbe essere la tua, molto, ultima risorsa.

Prova a far funzionare il tuo layout in un browser standard web (es. Firefox, Chrome), così inizi con una solida base. Quindi prova a risolvere i rimanenti problemi (specifici del browser) utilizzando proprietà CSS aggiuntive (ad es. Display: inline per il bug mobile a doppio margine IE6).

Se non hai ancora risolto il problema del layout e vuoi davvero utilizzare JavaScript / MooTools, prova a usarlo correttamente :

Per selezionare un elemento HTML per id, utilizzare $ ('id'), non $$ ('# id'). $$ restituisce una matrice di elementi, ecco perché $$ ('div # preloader'). get ('tween') non funziona. $ ('preloader'). get ('tween') funziona senza problemi.

Successivamente, scopri gli eventi o il concatenamento delle funzioni. Utilizzando gli eventi, è possibile impostare la visualizzazione del preloader su nessuno dopo che è sbiadito:

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

O usando il concatenamento di funzioni (la funzione start () supporta il concatenamento):

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

Come vedi, è davvero facile. Non aver paura di sporcarti le mani ...

Altri suggerimenti

Prova a utilizzare Fx.Tween , iniziando con un opacity di 1 e interpolazione su 0, per il precarico div. Quindi, una volta terminato, imposta display:none;.

Potrebbe apparire come (non testato):

    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');
    });

Sembra che tu possa anche usare (non testato):

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

Ognuno di questi dovrebbe durare 2 secondi.

Ho lavorato molto con la risposta di Chris ma non sono riuscito a ricavarne nulla. Invece ho organizzato quello che ho fatto prima e ho finito con questo:

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

Diciamo che ho migliorato le mie conoscenze ma è troppo semplice per quello di cui ho bisogno. Ho cancellato il preloader non appena l'intera pagina è stata caricata, quindi ho nascosto il contenitore prima di renderlo & Quot; real & Quot; con il display: blocco. Ora è lì ma nascosto. Quindi ha applicato la dissolvenza, supponendo che per essere più orientati alla grafica ci sarebbe voluto più tempo per caricare e forse sarebbe più evidente. Non credo che sia cambiato molto.

Ogni nuova idea sarebbe molto apprezzata. Grazie Chris per il tuo.

Capito !!!

Ecco il codice!

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

Nel corpo dell'html ho ottenuto questo:

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

Mostro il #container in modo da poter sfumare il #preloader su di esso e non ho bisogno di .setStyle ('display', 'none'); per la causa successiva, l'opcaità 0 lo rende non presente. Vorrei vedere se questo è completamente vero, perché non ho bisogno del div fluttuante su tutto il sito & Quot; invisible & Quot ;.

Grazie per le risposte precedenti. Questo sito mi ha aiutato molto: LINK

Sono passato da Mootools a Jquery perché avevo bisogno di alcuni trucchi e Mootools era troppo grande per essere gestito da me.

Jquery è più facile da gestire e da imparare, è più semplice codice e logica. Comunque, ecco il problema, il codice e la soluzione:

Il problema: ho un design con 3 colonne, SEO, tableless, funziona su ogni browser, ecc. Ma la terza colonna ha funzionato in modo strano a causa del tempo di caricamento + rendering online ma poteva essere qualcos'altro. Quindi, a volte i div non rimanevano a destra e talvolta apparivano nel secondo contenitore. Ho scoperto che dovevo caricare tutte le immagini del sito prima di essere renderizzato all'utente e questo ha risolto il comportamento strano che ho visto in Firefox (a volte). L'altra soluzione stava cambiando il wireframe per l'html del sito, ma è qualcosa su cui sto lavorando in questo momento. Avevo bisogno del preloader perché volevo vedere il rendering del sito completo.

Codice del sito:

<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>

Soluzione1: ho deciso di ingannare il browser per non rendere il " real " sito, fino al termine del caricamento delle immagini. Usando style = & Quot; display: none & Quot; impedisco al browser di visualizzare il div genitore e quindi gli elementi all'interno. Quando il tempo di caricamento è pronto, mostrerei il div e dato che è caricato completamente, renderebbe ok. Avevo bisogno di qualcosa per coprire il processo in modo che l'utente sapesse che il sistema funziona mentre aspetta un paio di secondi, quindi ho fatto un div che avrebbe coperto l'intero sito con alcuni blabla sul processo di caricamento.

Mootools:

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

}).fade(0);
}

Nota che in questa soluzione non ho ancora il controllo del tempo impiegato per la transizione. Quello sbagliato in cui l'ho fatto è in un'altra risposta, ma non so come affrontare questa nuova situazione. In ogni caso, ho deciso che questi erano solo un trucco e avevo bisogno di qualcosa che precarichi davvero le immagini per visualizzare il sito in una sola volta.

Solution2: Ho usato la stessa idea di prima ma mi sono reso conto che non avevo bisogno di visualizzare: nessuno il div contenitore se ti era velato con un div preloader. D'altra parte, IE mi ha dato alcuni errori perché quando ho usato display: none e i div interni hanno usato uno script per arrotondare gli angoli, i div senza rendering hanno fatto impazzire IE. Risolto questo, ho usato Jquery e tutto ha funzionato bene.

Jquery:

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

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

Le prime istruzioni erano per evitare problemi con i mootools.

La seconda riga era per l'attivazione del precaricamento delle immagini appena il documento è pronto. Si applica anche una barra di stato a un div con l'id indicato in satusBarEl . Lo strumento per farlo potrebbe essere scaricato da qui @filamentgroup

La parte finale fa una dissolvenza di 4 secondi non appena l'intero documento + immagini è pronto. Si applica al div #preloader.

Questo è tutto. Funziona bene in tutti i browser che ho testato.

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow