2010-12-01 19 views
1

私はウェブページを作っており、残りの部分をロードする前にプリローダーを表示したいと考えています。私は最初の<head>タグだけをブラウザで解析し、残りは無視するようにします。これは理想的である:後で解析されないHTML要素を追加するには?

<head> 
    <script src='preloader.js'></script> 
    <script src='more1.js' ignore='true'></script> 
    <script src='more2.js' ignore='true'></script> 
    <script src='more3.js' ignore='true'></script> 
</head> 

私が彼らのコメントを外すように、それらを活性化するためにJavaScriptによって、後にマークし、私のページ上の既存、潜在HTMLタグを持つことが可能であるかもしれないか疑問に私を運転しました。コメントされたコードが答えになると思っていましたが、jQueryのDOMからHTMLコメントを読み取ることができませんでした。

後でアクティブにする潜在HTMLを作成するにはどうすればよいですか?

私は探していません:
- 有効なHTMLがあります。
- HTMLコンテンツを独自のファイルの外部に置く(属性を変更するなどの変更は問題ありません)。
- 既に解析されたものを再表示します。

+1

サイドノート:「読み込み中...」というメッセージは新しいFlashイントロですか? –

答えて

2

少し明確にする必要があります.HTMLを解析しない、または表示しないようにしますか?

あなたは、それを解析することにしたいscript要素内のJavaScriptの文字列でそれをplunkない場合:

<script type="text/javascript"> 
/* <![CDATA[ */ 

var yourHTML = '<div id="whatever">...</div>'; 

/* ]]> */ 
</script> 

あなたはそれを表示させたくない場合は、インラインでdisplay:noneを設定しましたスタイル(これはCSSで起こる可能性のある問題を防止する):あなたは、それぞれ$(yourHTML)$('#whatever')を使用してjQueryを使って、後でノードにアクセスすることができますいずれの場合も

<div id="whatever" style="display: none;">...</div> 

+0

したがってスクリプトタグ。 HTMLは変数に格納されますが、HTMLの残りの部分でスクリプトタグを保持することができます。 – zzzzBov

+0

どのようにして後でCDATA要素のコメントを外しますか? – Pup

+0

@Pupあなたのアップデートを読んだあと、あなたは単に属性を検出するために*解析する必要があるため、存在しない 'no-parsing'属性を探していることがわかります。また、ページがロードされた後に外部スクリプトを動的に追加するように見えます。どのようなHTMLを選択しても、JavaScriptを使用して、表示するHTMLを有効/検出/選択/追加/解析する必要があります。 – zzzzBov

0

1つのオプションは、javascriptを使用してDOMにコンテンツを追加することです。

あなたはjqueryのを使用しているので、あなたができる:

var aThingToAddLater = $('<div class="myNewDiv">div content</div>'); 

$("body").append(aThingToAddLater); // <-- this will add it to the dom, specifically as the last element of the body 

この方法では、実際の「未解析の-まで、後でのコンテンツはjavascriptのコードになります。

+0

HTMLを独自のファイルの外部に保存しないでください。 – Pup

0

まず、あなたのウェブページのプリローダーが必要な場合、私はあなたが正しいとは思わないと思います。しかし、再び、私は全体の文脈を知りませんし、プリローダーが正当化される場合もあります。

単純に表示をnoneに設定して、ページが準備完了したらコードを表示してみましたか?例えば。

<div class="preloader">...</div> 
<div class="main" style="display: none">...</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".main").show(); 
    }); 
</script> 

この作業が正しく行われるようにするには、preloader-divを送信した後で、Webサーバーの出力バッファをフラッシュする必要があります。 PHPの場合、次のようになります:

<div class="preloader">...</div> 
<?php 
    flush(); 
?> 
... 
関連する問題