全体のページを読み込む

Question

これは基本的な質問のようです。

私は軽量のウェブサイトを持ち、一度にページ全体をロードしたいので、ウェブサイトのホーム/コンタクト/ ...の部分へのリンクはロードに時間がかかりません。

これを実装するための最良のメカニズムは何でしょうか？

Answer 1

私はこれは私がHTMLとCSSでこの種のコンテキストを作成し

基本的に

http://jsfiddle.net/9DMBq/

jQueryを使って実現することができる方法を示すために、セットアップ、基本的なjsfiddleを持っています。

CSS：

<style> 
#container { height: 200px; width: 400px; background-color: #CCC; } 
h3 { font-size: 20px; padding:5px; } 

.button {cursor: pointer; padding:10px; background-color: #EEE; margin:5px;} 

.content { position: absolute; width: 400px; height: 100px; background-color: #FFF} 
​</style> 

HTML：

<div id="container"> 
<span id="homenav" class="button">Home</span> 
<span id="aboutnav" class="button">About</span> 
<br> 
</br> 
<div id="home" class="content"> 
    <h3>home</h3> 
</div> 
<div id="about" class="content" style="display: none;"> 
    <h3>about</h3> 
</div> 
</div> 

し、私はそれを動作させるためにいくつかのjQueryを追加しました：

$('.button').click(function() { 

    var whereto = $(this).attr("id").replace('nav', '') 

    $('.content').fadeOut(function() { 
     $('#' + whereto).fadeIn() 
    }) 
})​ 

私はこれを行うには他の多くの方法があるが、これはあなたの問題を解決したいと考えています。

私はもともとのみすべてのコンテンツが完成ロードを持っていた、しかし、私はちょうど包みここにこれを残しておきます、一度表示し、ページを持つことに言及すると思っていました。

この

は

とヘッダにjqueryのを参照してください次のコードでjQueryを使って超簡単に達成することができます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 

、その後、あなたのhtmlの頭の中で次のように固執

<script> 
    $('html').hide(); 

    $(document).ready(function() { 
     $('html').show(); 
    }); 
</script> 

Answer 2

これらのページを目に見えないDIVにロードしてから、ユーザーがリンクをクリックするとJavascriptで表示/非表示にします。 < jQuery年代のそれを見た後

window.onload = function() { /* do everything */ 

を開始するには良い場所 -

Answer 3

window.onload。 show（）と使用CSS表示：なし