0

私はワードプレスでウェブサイトを構築しています。そこには4つのdiv領域があり（最初の画像を確認してください）、内容は次のとおりです。

  1. AREA-1: HTML コードからプレーン テキスト コンテンツを直接読み込んでいます。
  2. AREA-2: カテゴリ 1 のサムネイル画像を含む 4 つの投稿を読み込み、スライダーとして表示します。
  3. AREA-3: サムネイル画像付きの 4 つの投稿も読み込みますが、カテゴリ 2 からのもので、スライダーとして表示されます。
  4. AREA-4: Contact Form-7 プラグインを使用して、4 つのフィールドを持つコンタクト フォームを読み込みます。

これは、ページが完全に読み込まれた後です

問題は、ページの読み込み中に、AREA-1 と AREA-4 が高速に読み込まれ、AREA-3 と AREA-4 がなくても表示されることです。これは非常に奇妙に見えます。ページの読み込み中は次のようになります (次の画像)。

これは、ページがロードされているときの様子です

どうすればこの問題を解決できますか? まとめて載せたい。ページ上に 4 つの画像を含む大きな画像スライダー (上部) もあります。そのため、area-1 と area-4 に onload イベントを使用すると、area-2 と area-3 の読み込みが速くなります。また、すべての領域に onload を使用すると、ページは空のままですが、すべてのスライダー画像が読み込まれます。それらは非常に大きな画像であり、見栄えがよくありません。それで、同時にロードするために4つの領域すべてをロードする方法はありますか？画像スライダー（上部）が完全にロードされているかどうかは関係ありませんか？私はjavascriptがあまり得意ではありません。したがって、どんな助けも本当に感謝しています。

4

1 に答える 1

0

2 オプション:

  1. 画像をプリロードしますhttp://perishablepress.com/3-ways-preload-images-css-javascript-ajax/
  2. onload イベントまでテキスト領域を非表示にします。http://www.w3schools.com/jsref/event_img_onload.asp
于 2013-11-05T06:56:06.307 に答える