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

https://stackoverflow.com/questions/1050179

20-08-2019
|

Вопрос

Я сделал страницу, 3 столбца, без таблиц и в формате CSS (как и должно быть).Иногда браузер ничего не ставит на место.Поэтому я создал поддельный предварительный загрузчик в DIV id="preloader" и обертку контента в другом DIV id="container".

Сначала я сделал несуществующей всю обертку (не там, в отличие от видимости, которая просто «скрывается»).

CSS

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

Затем, с помощью mootools, я изменил их значения сразу после загрузки всего документа, поэтому, когда контейнер становится видимым (блоком), он полностью готов к обработке CSS (изображения и все остальное).

СЦЕНАРИЙ

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

Все идет нормально.Но поскольку я не мог чувствовать себя там счастливым, мне хотелось добавить в решение немного пикантности.Я решил использовать эффект затухания для элемента div предварительной загрузки или эффект затухания для контейнера.Я подумал, что, возможно, в контейнере слишком много вещей внутри, и эффект затухания может превратиться в «не такой уж крутой» эффект, поэтому я выбрал div preloader, чтобы сделать затухание поверх div контейнера.

Потом начались неприятности.Я не программист, я графический дизайнер, и даже несмотря на то, что я неплохо разбираюсь в коде и подгоняю его под свои злые побуждения, на этот раз мне не удалось многое понять из документов mootools (я считаю их худшими подробными и пример отсутствия учебников всех времен), я наконец пришел к следующему:

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

Это работает!Но мне нужно дать прелоадеру больше времени на затухание, чтобы анимация работала плавно.Действительно, это проблема.У меня просто было ощущение, что мне нужно создать какой-то var=myFade, а затем задать ему параметр продолжительности, но я много копал и ничего не нашел, особенно когда инструкции предназначены для нажатия кнопок.

Ребята, я прошу вас помочь мне разобраться в этом вопросе.Это было бы очень признательно.

Решение

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

Попробуйте заставить свой макет работать в браузере, соответствующем веб-стандартам (например.Firefox, Chrome), поэтому вы начинаете с прочной базы.Затем попробуйте исправить оставшиеся проблемы (специфичные для браузера), используя дополнительные свойства CSS (например.отображать:встроенный для ошибки плавающего двойного поля в 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 легче обрабатывать и изучать, он представляет собой более простой код и логику.В любом случае, вот проблема, код и решение:

Проблема: У меня есть дизайн с тремя столбцами, 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: Я решил просто обмануть браузер, чтобы он не отображал «настоящий» сайт, пока он не завершит загрузку изображений.С использованием стиль = «дисплей: нет» Я не позволяю браузеру отображать родительский элемент div и, следовательно, элементы внутри.Когда время загрузки будет готово, я покажу div, и, когда он загрузится полностью, он будет отображаться нормально.Мне нужно было что-то, чтобы осветить процесс, чтобы пользователь знал, что система работает, пока он ждет пару секунд, поэтому я сделал div, который охватывал бы весь сайт некоторой болтовней о процессе загрузки.

Mootools:

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:нет, а внутренние элементы div использовали скрипт для скругления углов, неотрисованные элементы div сводили IE с ума.Исправлено, я использовал JQuery, и все работало нормально.

Jзапрос:

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow