Исчезните div по всему сайту, чтобы (имитировать) сделать preloader с (Mootools) Jquery - PullRequest
Новая
       21

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

1 голос
/ 26 июня 2009

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

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

CSS 

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

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

SCRIPT 

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

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

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

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

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

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

Ответы [ 5 ]

1 голос
/ 09 июля 2009

Прежде всего, использование 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');
});

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

1 голос
/ 26 июня 2009

Попробуйте использовать 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 секунды.

0 голосов
/ 10 июля 2009

Я перешел с 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>

Solution1: Я решил обмануть браузер, чтобы он не отображал «реальный» сайт, пока он не закончил загружать изображения. Используя style = "display: none" Я не позволяю браузеру отображать родительский 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);
}

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

Solution2: Я использовал ту же идею, что и раньше, но я понял, что мне не нужно отображать: ни один контейнерный div, если ti был завуалирован с предварительным загрузчиком div. С другой стороны, IE дал мне несколько ошибок, потому что когда я использовал display: none, а внутренние div использовали скрипт для округления углов, unrendered 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.

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

0 голосов
/ 30 июня 2009

Понял !!!

Вот код! 

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 плавал по всему сайту "невидимым".

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

0 голосов
/ 27 июня 2009

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

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

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

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

...