1

私のプロジェクトで、Apple のページの動作の 1 つを模倣したい (FF、Chrome、Safari で最適に表示される):

  1. 最初の瞬間、ページはヘッダーを除いて空ですが、ページの高さは、すべてが読み込まれるときにすでに最終的な高さに設定されているため、ブラウザーのスクロールバーは変更されません。
  2. ページの要素 (メイン バナー、中レベル バナー、ラスト バナー、フッターなど) は、滑らかなフェードインで上から下に 1 つずつ表示されます。

これらの 2 つのことにより、ページの読み込みが非常にスムーズで見事に見えます。

一般的に、これは私のページがどのように見えるかです:

<header></header>
<div id="content>
     <div id="mainImage"></div>
     <div id="gallery"></div>
     <div id="info"></div> 
</div>
<footer></footer>

アップルがどのようにそれを行ったのか、いくつか推測がありますが、よくわかりません：

  1. すべてが入っているにもかかわらず、すべてのページが完全に読み込まれ、opacity:0その後にのみ、各要素の外観を 1 つずつアニメーション化するスクリプトがあります。それは効率的ではないと思います。
  2. すべてのページは、各セクションの ajax 呼び出しに基づいて構築されています。読み込みが完了すると、ページが表示されます。また、最初に来るものではなく、常に上から下に表示されるため、これも適合しません。そして、最初にページの高さをどのように計算しますか。

コードが使いやすくなるように、アイデアや、コードを効率的かつ一般的にする方法を提供していただければ幸いです。

何か案は？

4

3 に答える 3

2

アップルサイトはscriptaculousを使用しています。彼らのウェブページには、ライブラリとドキュメントの無料ダウンロードがあります。

于 2012-05-07T14:15:26.667 に答える
1

You could use jquery and fade in each element in the order you want and in its callback you fade in the next one.

http://jsfiddle.net/lucuma/Pd7We/

$('#nav').fadeIn(500,function() {
    $('#main').fadeIn(1000,function() {
       $('#footer').fadeIn(1000);     
    });
});​
于 2012-05-07T14:08:26.370 に答える
1

このようなものはどうですか：

jQuery(function ($) {
    $('.loading').show();
    $('.main').hide();
});
$(document).on('load', function () {
    $('.main').fadeIn(500);
    $('.loading').hide();
});
于 2012-05-07T17:57:06.847 に答える