Исчезните div по всему сайту, чтобы (имитировать) сделать предварительный загрузчик с (Mootools) Jquery

Прежде всего, использование JavaScript для исправления проблем с макетом CSS должно быть вашим самым, самым, самым последним средством.

Попробуйте заставить макет работать в браузере веб-стандартов (например, Firefox, Chrome), чтобы начать с прочной основы. Затем попытайтесь исправить оставшиеся (зависящие от браузера) проблемы, используя дополнительные свойства CSS (например, display: inline для ошибки плавающего двойного поля в IE6).

Если вы все еще не исправили проблему с макетом и действительно хотите использовать JavaScript/MooTools, попробуйте использовать его правильно:

Чтобы выбрать элемент HTML по идентификатору, используйте $('id'), а не $$('#id'). $$ возвращает массив элементов, поэтому $$('div#preloader').get('tween') не работает. $('preloader').get('tween') работает без проблем.

Затем узнайте о событиях или цепочках функций. Используя события, вы можете отключить отображение предварительного загрузчика после его исчезновения:

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

Или используя цепочку функций (функция start() поддерживает цепочку):

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

Как видите, это действительно легко. Только не бойтесь испачкать руки...

Попробуйте использовать Fx.Tween, начиная с opacity из 1 и анимируя до 0, для предварительной загрузки div. Затем, когда все будет готово, установите display:none;.

Это может выглядеть примерно так (не проверено):

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

Похоже, вы также можете использовать (непроверено):

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

Каждый из них должен длиться 2 секунды.

Я много работал с ответом Криса, но ничего не мог из этого получить. Вместо этого я переделал то, что делал раньше, и закончил следующим образом:

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

Допустим, я улучшил свои знания, но они слишком базовые для того, что мне нужно. Я удалил предварительный загрузчик, как только загрузилась вся страница, затем скрыл контейнер, прежде чем сделать его «настоящим» с помощью display: block. Сейчас есть, но скрыто. Затем применил затухание, предполагая, что из-за большей графической ориентации загрузка займет больше времени и, возможно, будет более заметной. НО я не думаю, что это сильно изменилось.

Любая новая идея будет высоко оценена. Спасибо, Крис, за твое.

Понятно!!!

Вот код!

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

В теле html я получил это:

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

Я показываю #container, чтобы я мог скрыть #preloader поверх него, и мне не нужен .setStyle('display','none'); для более поздних причин непрозрачность 0 делает ее несуществующей. Я бы посмотрел, так ли это на самом деле, потому что мне не нужен div, плавающий по всему сайту «невидимый».

Спасибо за ваши предыдущие ответы. Мне очень помог этот сайт: ССЫЛКА

Я перешел с Mootools на Jquery, потому что мне нужны были некоторые хитрости, а Mootools был слишком большим для меня.

Jquery легче обрабатывать и изучать, это более простой код и логика. Во всяком случае, вот проблема, код и решение:

Проблема: у меня есть дизайн с 3 колонками, SEO, без таблиц, работает во всех браузерах и т. д. Но третья колонка работала странно из-за времени загрузки + онлайн-рендеринга, но может быть что-то еще . Итак, иногда элементы div не оставались справа, а иногда появлялись внизу второго контейнера. Я обнаружил, что мне нужно загрузить все изображения сайта перед их отображением пользователю, и это решило странное поведение, которое я видел в Firefox (иногда). Другим решением было изменение каркаса для html сайта, но это то, над чем я сейчас работаю. Мне понадобился предварительный загрузчик, потому что я хотел увидеть завершенный рендеринг сайта.

Код сайта:

<<!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>

Решение 1: я решил просто обмануть браузер, чтобы он не отображал «настоящий» сайт, пока он не завершит загрузку изображений. Используя style="display:none", я запрещаю браузеру отображать родительский элемент div и, следовательно, элементы внутри. Когда время загрузки будет готово, я покажу div, и когда он будет полностью загружен, он будет отображаться нормально. Мне нужно было что-то для покрытия процесса, чтобы пользователь знал, что система работает, пока он ждет пару секунд, поэтому я сделал div, который бы покрывал весь сайт какой-то блаблой о процессе загрузки.

Инструменты:

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

}).fade(0);
}

Обратите внимание, что в этом решении я по-прежнему не могу контролировать время перехода. Неправильный, где я это сделал, находится в другом ответе, но я не знаю, как действовать в этой новой ситуации. В любом случае, я решил, что это всего лишь уловка, и мне нужно что-то, что действительно предварительно загружает изображения для отображения сайта сразу.

Решение 2: я использовал ту же идею, что и раньше, но понял, что мне не нужно отображать: none контейнер div, если ti был завуалирован div предварительного загрузчика. С другой стороны, IE выдал мне несколько ошибок, потому что, когда я использовал display: none, а внутренние элементы div использовали скрипт для скругления углов, неотрисованные элементы div сводили IE с ума. Исправлено, я использовал Jquery, и все работало нормально.

Jquery:

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

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

Первые инструкции были для того, чтобы избежать проблем с mootools.

Вторая строка предназначена для активации предварительной загрузки изображений сразу после того, как документ будет готов. Он также применяет строку состояния к элементу div с идентификатором, указанным в satusBarEl. Инструмент для этого можно загрузить с здесь @filamentgroup

Заключительная часть делает затухание на 4 секунды, как только весь документ+изображения будут готовы. Это относится к разделу #preloader.

Вот и все. Он отлично работает во всех браузерах, которые я тестировал.