4

Wordpress の添付ファイルから大量の画像を取得し、ある種の石積みグリッドを使用してページにダンプしています。すべて問題ありません。ただし、少し時間がかかります。

ページの読み込み中に、いくつかのテキストを含む div を表示し、その後、表示: なしを表示する方法はありますか?

私はこれまでのところこれを持っています：

<script type="text/javascript">
function showContent(){
//hide loading status...
document.getElementById("loading-grid-page").style.display='none';

//show content
document.getElementById("content").style.display='block';
}
</script>
</head>
<body onload="showContent()">
<script type="text/javascript">
document.write('<div id="loading-grid-page">Fetching ALL the gold...</div>');
</script>
<div id="content">
<script type="text/javascript">
//hide content
document.getElementById("content").style.display='none';
</script>

そして私のCSS、

#loading-grid-page {
color: #ffffff;
font: 700 11px/25px 'proxima-nova-1', 'proxima-nova-2', sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
background: #111111 url('images/ajax-loader-black.gif') no-repeat 15px center;
border-radius: 2px;
border: 1px solid #111111;
padding: 5px 30px;
text-align: center;
width: 200px;
position: fixed;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -100px;
z-index: 1000000;
}

ただし、混合結果が返されます。待機してすべての石積みが機能する場合もあれば、そうでない場合もあり、石積みが失敗し、ページが奇妙に読み込まれます。

そこに他に何かあるのだろうかと思っただけです;）

ありがとう、R

4

4 に答える 4

2

これは JQuery の優れた使い方の 1 つです。ページが読み込まれたときにコードを実行したい場合は、次のようにします。

$(window).load(function(){
    //hide loader div here
    $("#loading-grid-page").hide();
});
于 2012-01-03T18:05:10.147 に答える
2

私はこのようにします：

  1. 空のページを読み込み、ローダーを表示します。
    メソッドを初めてロードするときは、(y) 画像をロードするだけです。例では 12 で十分です。それらすべてをロードしないでください。

  2. (JQuery) Ajax を使用してコンテンツをロードします。

    ajax/json を使用してサーバーに接続し、残っている画像の数 (合計 - 表示済み) をカウントします。(合計 > 0) の場合、それらの画像へのリンクを json 配列として返します。

    jquery のjson 呼び出しへのリンク。PHP を使用した json の解析へのリンク。

  3. ローダーを非表示にします。

    ローダーを含む div を非表示にして、リンクをコンテンツ div に追加します。

  4. コンテンツを表示します。

    ここでは、div を追加するか、既存のものを使用するかの 2 つのオプションがありますが、これはコードの実装方法によって異なります。ここでも JQuery をお勧めします。

于 2012-01-03T18:05:46.257 に答える
0

DOM の準備ができたら、 ded のdomreadyイベントを使用してオーバーレイを非表示にすることができます。

于 2012-01-03T18:06:26.490 に答える
0

次の手順を実行します：

  1. body タグの下に Div Like を作成します
  2. Ext Js ライブラリをスクリプトとして head にインクルード

  3. スクリプトタグを作成し、スクリプトタグ内の行の下に書き留めます

    var マスク; function loadMask(el,flag,msg){ Mask= new Ext.LoadMask(Ext.get(el), {msg:msg}); if(フラグ) Mask.show(); そうでなければMask.hide（）; }

  4. body タグで関数 beforeload を呼び出し、次のように関数 loadMask を呼び出します javascript:loadMask('myLoading',true,'Loading ...')

  5. body タグで関数 onload を呼び出し、 javascript:loadMask('myLoading',false,'Loading ...') を呼び出します

ステップ4が機能しない場合は、新しい関数unloadMaskを作成し、この関数内でコードの下に記述し、bodyタグのオンロードでこの関数を呼び出します

function unloadMask(){ 
 Ext.util.CSS.createStyleSheet(".myloadingjs {\n visibility:hidden;  \n } ", "GoodParts");
}
于 2013-01-24T05:00:06.190 に答える