コンテンツを非表示にする

Question

ページのdivに2つの大きな画像ファイルがあり、読み込むのに数秒かかる。 「読み込み中のGIF」が表示されている間に読み込みコンテンツを非表示にしてから、コンテンツが完全に読み込まれたら表示させるにはどうすればよいですか？

私はjavascriptについて実際にはわかりませんが、私はこのコードを使ってみました。私がやりたかったことの半分でした。 "loading gif"は機能しましたが、問題はコンテンツが読み込まれているときに表示されていたことでした。

http://aaron-graham.com/test2.html

<div id="loading" style="position:absolute; width:95%; text-align:center; top:300px;"> 
     <img src="img/parallax/ajax-loader.gif" border=0> 
</div> 
    <script> 
     var ld=(document.all); 
     var ns4=document.layers; 
     var ns6=document.getElementById&&!document.all; 
     var ie4=document.all; 
     if (ns4) 
     ld=document.loading; 
     else if (ns6) 
     ld=document.getElementById("loading").style; 
     else if (ie4) 
     ld=document.all.loading.style; 
     function init() 
     { 
     if(ns4){ld.visibility="hidden";} 
     else if (ns6||ie4) ld.display="none"; 
     } 
    </script> 

任意の助けいただければ幸いです！

Answer 1

のようなコードを使用しjqueryの、：DOMおよびその他のリソースの後に呼ばれるそれは、ドキュメントの準備ができて関数が呼び出されたときに実行して動作

<img id="pic1" /> 

（：HTMLなどで

$(document).ready(function(){ 
    $('#pic1').attr('src','http://nyquil.org/uploads/IndianHeadTestPattern16x9.png'); 
}); 

は、作成されている場合）、imgのsrc属性にイメージのURLを割り当てます。
nyquil.orgのURLを必要な画像に変更し、必要な数だけ追加します（外に出ないでください）。 http://jsfiddle.net/mazzzzz/Rs8Y9/1/

Answer 2

あなたは、両方がonloadイベントを経由してロードしたときのために見ることができるので、私は2つのイメージのためnotifyLoadedクラスを追加し、あなたのHTMLの構造をオフの作業：テスト済みのFirefox 3 /クロームここ10

はデモです。 CSSの背景画像は、そのイベントを得ることはありませんので、我々はそのイメージがロードされたときにテストすることができますので、私は、バックグラウンドのパスを使用して隠されたIMGを作成しました

HTML：

<div id="loading"> 
     <img src="http://aaron-graham.com/img/parallax/ajax-loader.gif" border="0" /> 
    </div> 

    <div id="vertical"> 
     <div> 
      <div class="panel"> 
       <img class="notifyLoaded" src="http://aaron-graham.com/img/parallax/tile3.png" /> 
      </div> 
     </div> 
    </div> 

    <div id="imgLoader"> 
     <img class="notifyLoaded" src="http://aaron-graham.com/img/parallax/deepspace3.jpg" alt="" /> 
    </div> 

あなたがjQueryのへの参照を持っているあなたページが既にあるので、私はあなたのスクリプトを次のものに置き換えました。

jQueryの：私もイメージがロードされている時に変更されますデフォルトdisplay:none;に#Verticalを設定した

$(document).ready(function() { 
    var $vertical = $('#vertical'); 
    var $imgs = $('.notifyLoaded'); 
    var imgCount = $imgs.length; 
    var imgLoadedCount = 0; 

    $vertical.backgroundparallax(); // Activate BG Parallax plugin 

    $imgs.load(function() { 
     console.log(this); 
     imgLoadedCount++; 
     if (imgCount == imgLoadedCount) { 
      // images are loaded and ready to display 
      $vertical.show(); 
      // hide loading animation 
      $('#loading').hide(); 
     } 
    }); 
}); 

CSS：JS

body {background-color:black;} 
#loading {position:absolute;width:95%;text-align:center;top:300px;} 
#vertical {display:none;background-image: url('http://aaron-graham.com/img/parallax/deepspace3.jpg');background-position: 0 0;height: 650px;width: 900px;overflow: auto;margin:35px auto auto auto;} 
#vertical > div {margin: 0;color: White;} 
#vertical .panel {padding: 100px 5%;margin-left:40px;height: 3363px;} 
#imgLoader {display:none;}