2

まず、私はウェブ デザイナーではありません。ただのオタクで、友人を助けようとしています。

グラフィックを多用する Web サイト (写真 Web サイト) で作業しているため、ページの読み込みが遅くなります。最大の遅延はポートフォリオのサムネイルで、通常は jquery スライダーによって隠されています。読み込みが完了する前にページが正しく表示されない可能性があるため (そしてそれが不自然に見える)、 で消える読み込みグラフィックを実装しました$(window).load()。ただし、すべてのグラフィックがロードされるのを待つため、ロード中のグラフィックは、ページを表示する前に 10 秒以上スピンすることがあります (帯域幅によって異なります)。

私がやりたいのは、読み込み時に個々の要素をきれいな jquery 効果で表示することです。そうすれば、視聴者はすぐにコンテンツを見始めることができ、見た目もきれいです。

そのため、いくつかの要素を設定してから、ページの最後でand/or関数をdisplay:none呼び出します。それは機能しますが、グラフィックスが完全に読み込まれる前に関数が実行されることがあるため、まだポップインしているように見えます。しかし、関数を内部にラップしようとしても機能しません。すべてのフェード効果を に入れることができます。これはきれいに見えますが、これらのサムネイルすべてを待機するため、目的に反します。fadeIn()slideDown()fadeIn()fadeIn()('#element').load()window.load()

あるいは、window.load()イベントから特定の画像を除外する方法があれば? または、後に動的にサムネイルギャラリーを追加するにはwindow.load()? 現在、ページはかなり静的で、きれいな jquery スライダーとライトボックスがいくつかあるだけです。

Google から入手した jQuery 1.9.1 を使用しています。ページをきれいにレンダリングするための別の方法またはより良い方法があれば、私はすべて耳にします。

テストサイトのURLはこちらです。私が見たいと思っている私のビジョンは、背景と読み込み中のグラフィック、次にslideDown()ロゴ、続いfadeIn()て画像フレームを表示し、読み込み中のグラフィックを削除し、画像フレームのコンテンツをフェードインしてから、下のナビゲーションメニューを下にスライドさせながらフェードインすることです。左のナビゲーション メニュー。

(編集)
これは、私が回避しようとしている問題のより詳細な説明です。ページ全体の読み込みに 10 秒かかる場合:
@1 秒ですべてのテキスト コンテンツがブロックで表示され、1995 年の不適切な設計の中学 2 年生のプロジェクトのように見えます。
@2-5 秒document.ready()が起動し、スライダー スクリプトがページの解析を終了し、テキスト コンテンツ コンテナ要素を、非常にびくびく醜い方法で所定の位置に移動します。これで、レイアウトは問題ないように見えます。
@10 秒でサムネイルの読み込みが最終的に完了し、起動しwindow.load()ます。

私の現在の回避策は、スライダー スクリプトが終了した後にコンテナー要素のフェードインを開始しますが、それらの要素の一部は読み込みが完了していない可能性があるため、フェードインではなくポップインするように見えることがあります。

4

1 に答える 1

1

あなたの質問のどの部分に行き着くかは、一度にすべてを行うのではなく、それぞれimgをロードしてから対応する要素をチェックすることです。fadeIn

例えば：

$("img").load(function() {
   $(this).fadeIn(1000);
}).each(function() {
   if(this.complete) $(this).load();
});

その実装の実例はHEREにあります。

于 2013-07-13T20:46:36.387 に答える