2009-06-26 4 views
1

私はページ、3 cols、tablelessとcss formated(そうすべきである)を作りました。時にはブラウザがその場所に何も置かないことがあります。だから私はDIV id = "preloader"と別のDIV id = "container"のコンテンツラッパーに偽のプリローダーを作りました。(Mootools)JREeryでプレローダーを行うために、サイト全体でdivをフェードアウトするJquery

最初に私は全体のラッパーを非存在にしました(視認性とは反対に、単に「隠す」)。全体がCSSによってスキンされるように(ブロック)全体のドキュメントがロードされたときだけ

CSS

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

は次に、MooToolsので、私はその値を変更するので、容器が見えるようになるときに準備ができています(画像とすべてを含む)。

SCRIPTこれまで

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

とても良いです。 しかし、私がそこで幸せに感じることができなかったので、私は解決策にいくつかのスパイスを加えたいと思っていました。プリローダーdivのフェードアウトエフェクトやコンテナのフェードインエフェクトを使用することにしました。私は、コンテナの内部に余りにも多くのものがあり、フェードイン効果が「あまりクールでない」効果に変わる可能性があるので、プリローダdivを選択してコンテナdivにフェードアウトしました。

その後、トラブルになりました。私はプログラマーではなく、私はグラフィックデザイナーであり、コードを公開して欲しいと思っても、今度はmootoolsのドキュメントから多くのことを理解することができませんでした(私は、すべての時間のチュートリアルがない例)、私はついにこれに来ました:

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

これは機能します! しかし、アニメーションが円滑に実行されるように、プリローダにフェードする時間を増やす必要があります。確かに、それは問題です。私はいくつかのvar = myFadeを作成してからdurationのパラメータを与える必要があったと感じていましたが、特に指示がボタンクリックのためのものである場合は、何も見つからず何も見つかりませんでした。

私はあなたにこの事を整理するのを手伝ってもらうようお願いしています。それははっきりしないだろう。

+0

おそらく、私たちがテストできるように、何がうまくいかないかを示すhtml + cssスニペットを使ってこの例を明確にすることはできますか? –

答えて

1

まず、JavaScriptを使ってCSSレイアウトの問題を修正することは、あなたの非常に非常に最後の手段です。

ウェブベースのブラウザ(Firefox、Chromeなど)でレイアウトを作成するようにしてください。しっかりしたベースから始めましょう。その後、追加のCSSプロパティを使用して、残りの(ブラウザ固有の)問題を修正しようとします(例:IE6ダブルマージン浮動小数点の表示:インライン)。

あなたはまだあなたのレイアウトの問題を修正し、実際にはJavaScript/MooToolsのを使用したいしていない場合は、それをcorrectlyを使用しよう:

IDでHTML要素を選択するには、$(「ID」)を使用して、ではありません$$( '#id')。 $$は要素の配列を返します。そのため$$( 'div#preloader')。get( 'tween')は機能しません。 $( 'preloader')。get( 'tween')は問題なく動作します。

次に、イベントや機能の連鎖について学びます。それがフェードアウトした後、イベントを使用して、あなたは誰にも負けないプリローダーの表示を設定することができます。

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

または連鎖する機能(スタート()関数は、連鎖をサポート)を使用して:あなたが見たよう

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

を、それは本当に簡単です。

+0

あなたが慎重に読んだら、私はプログラマーではなく、Mootoolsは正確に友好的ではないと言ったので、私は最善を尽くすように努力しました。実際にあなたの前に投げ込まれた例はうまくいきませんが、私はそれらを働かせるために何をすべきか教えてくれた人はいません。とにかく、私は小さなフレームワークを使っていて、Mootools 1.2は1.1と互換性がないことに気づいたので、Jquery(Mootoolsとは何も関係ありません)としてより明確に描写されドキュメント化されたツールキットに変更することにしました。 ところで、私は$$を使用しました。なぜなら、Mootoolsで与えられた例があったからです。とりあえずありがとう! – Billeeb

+0

私は、MooToolsのドキュメントがいくつかの点で欠けていることに同意する必要があります(例:有用な例)。 jQueryは素晴らしいフレームワークであり、学ぶのがはるかに簡単なので、スイッチは論理的です(特に、プログラマーでない人なら)。あなたは、仕事のための適切なツールを見つける必要があります、それはあなたがしたようだ... – Ronald

1

opacityで始まってFx.Tweenを使用し、プリロード用にdivをトライすると、0になります。それが終わったら、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

私は最初のものを試しましたが、何もしません、私は全体のアイデアは大丈夫​​だと思っていますが、持続時間の定義と不透明度の開始は少なくとも私の小さな知識が私に見せてくれる限り、一方で 私が考えるもう一つは(私がテストし、それが動作しません)、GET要素のbecasue、代わりに セットのようなものでなければなりません(「トゥイーン」、blablablabla) が、私が試した間違っています無駄に。 (0); – Billeeb

+0

er、$$( 'div#preloader')。get( 'tween'、{property: 'opacity'、duration:2000})。 - >これはうまくいく(mootools 1.2+) –

+0

いいえ、動作しません。 IE7には、そのオブジェクトがないと言われて、何もしません。次の行が実行されなくなります(プリローダーdivの表示なし)。 私はかなり簡単だと思うが、2日間で解決策を見つけられなかった(私はプログラマーではないので、何かが足りない)。 – Billeeb

0

私はクリスの答えで多くの作業をしましたが、何も得られませんでした。代わりに、私はこれで私が前に何をしたかに配置し、終了日時:

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

だが、私は私の知識を向上させましょうが、それは私が必要なもののためにあまりにも基本的なのです。 ページ全体が読み込まれると直ちにプリローダーを消去した後、ディスプレイに「実際」を貼り付ける前にコンテナーを隠してしまいました:ブロック。今はそこにあるが、隠されている。その後、フェードインを適用し、グラフィックをより多く指向させるとロードに時間がかかり、おそらくもっと目立つようになるでしょう。私はそれが多くの変化を持っているとは思わない。

新しいアイデアは大歓迎です。あなたのおかげでChrisに感謝します。

0

コードは次のとおりです。私はその上に#preloaderをフェードすることができますし、私は '(表示を.setStyleを必要としなかったので、私は#containerを示し

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

:私はこれを得たHTMLのボディで

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

'、'なし');後の原因のために不透明度0はそれを非存在にする。私はこれが完全に真実であるかどうかわかります、なぜなら私はdivをサイト「目に見えない」の上に浮かべる必要はないからです。

あなたの以前の回答をありがとう。このサイトは私をたくさん助けてくれました:LINK

+0

これをJqueryで再構築し、より信頼できると判断します。さらに、プリローダーはFilamentgroup.comのpreloadCssImages.jQuery_v5.jsを使用して実際に動作します。 すぐにコードへのリンクをここで更新します。 – Billeeb

0

私はいくつかのトリックが必要なのでMootoolsからJqueryに変更しました.Mootoolsは処理するには大きすぎました。

Jqueryは扱いやすく、学ぶのが簡単で、コードとロジックがより単純です。 はとにかく、ここでの問題は、コードおよびソリューションです:問題

私は3列、SEO、テーブルなしでデザインを持っているが、その他everybrowser、上で動作しますが、3番目の列が原因に奇妙に働いていましたローディング時間+レンダリングはオンラインですが、それ以外のものでも可能です。だから、時々divが右にとどまらず、時には2番目のコンテナの下に現れました。私は、ユーザーにレンダリングされる前にサイトのすべてのイメージをロードする必要があることを発見し、それは私が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が表示され、完全にロードされると、okが表示されます。このプロセスをカバーするために何か必要なので、ユーザーはシステムが動作していることを2秒間待っているので、ロード・プロセスについてblablaでサイト全体をカバーする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: 私は前と同じ考えを使用しますが、私は、私は、ディスプレイに必要なかったことを実現:TIは、プリローダーのdivでベールに包まれたならばどれもコンテナのdiv。一方、IEはdisplay:noneを使用し、内側のdivがコーナーを丸めするスクリプトを使用していたため、IEがクレイジーになってしまったため、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の持つ問題を回避するためでした。

2行目は、ドキュメントの準備ができているようにイメージのプリロードを有効にするための行です。これは、satusBarElで示されるidを持つdivにステータスバーを適用します。これを行うためのツールは、here @filamentgroup

からダウンロードできます。最終的な部分は、ドキュメント+画像全体が準備完了するとすぐに4秒のフェードアウトを行います。これは#preloader divに適用されます。

これだけです。 テストしたすべてのブラウザで正常に動作します。

関連する問題