0

読み込みページの「スプラッシュ スクリーン Div」を実行する方法は既に知っています。すべてが読み込まれるまで待ってから、div を非表示にするか、画面外に移動します。

例えば

index.html

<div id="loading-Div">

        <div id="bear-Logo">

            <div id="target">
                <div id="target2">
                    <div id="bearloop"></div>
                </div>
            </div>

        </div>

    </div>

読み込み中.css

Just a class called 'fallback' to move the absolute-ly positioned div offscreen.

読み込み中.js

$(window).load(function(){

    $( '#loading-Div' ).addClass( 'fallback' );

});

上記は「読み込み中のスプラッシュ スクリーン Div」のかなり粗雑な例です。これを他に何と呼べばよいかわかりません。タグの末尾の直前に.cssがインポートされます。<head>.js<body>

リンクをクリックして、ページの読み込み中に div を表示したい場合、これはうまく機能しますが、目的のページが読み込まれるまで、リンクがクリックされた 2 番目に div を表示したいと思います。

ワークフロー:

http://i.imgur.com/dIOZSMS.jpg

キーポイント：

これはブラウザプラグインでのみ可能だと感じています。理由は次のとおりです。

  1. リンクは別の div へのアンカーではありません。例えばurl#div -> url#div2
  2. 上記に基づいて、リンクが別の.htmlページへのリンクであることを考えると、現在表示されているコンテンツは... ページが実際にどのように表示されるかに基づいて停止します。

ご了承ください：

  1. これは厳密にサイト内です。
  2. IEは気にしません。
  3. これは宿題ではなく、クライアントのためでもありません。私は Web 開発を学んでおり、これはそれ自体がクールなページ遷移であると考えていましたが、それをうまく行う方法がわかりません。

主に、2 番目のページのダウンロードが瞬時に行われ、前者の場合でも、コードが多すぎるため、ファイルサイズが多すぎて、div が表示するものの首尾一貫したアニメーションになってしまうためです。

アイデアはありますか？私はこれに非常に困惑しています。

4

1 に答える 1

1

Javascript は下部にあるため、ページの後に非同期で読み込まれます。

index.html

DIV をそのようにネストした理由がわかりません。ページはロゴ要素内にロードされますか?

読み込み中.css

画面から div を移動すると、アニメーションの一部になりますか?

$(".fallback").animate({top: "+=400px", opacity: 0}, 1000);

読み込み中.js

リンクがクリックされた後に要素を表示したい場合は、window.load 関数なしで実行してください。

http://jsfiddle.net/Etd2D/

于 2013-07-21T09:36:41.603 に答える