問題タブ [preloading]

jquery関数の問題に直面しています。ビジターがマウスポインターをヘッダーの背景画像上に移動している間、ヘッダーが0.5秒間消えないようにします。

http://www.kidsartvalley.com/

これがホームページです。子供の漫画に焦点を合わせると「こんにちは」と表示されることがありますが、ごく短時間表示されなくなることもあります。マウスのポインタをその上に移動したときに非表示にならないようにします。

これは画像に対して完全に機能しますが、これはどのように 1:1 を iframe に変換しますか? ここでクイック jsfiddle: http://jsfiddle.net/ET8Gw/

重複の可能性:
プリロードされた画像が Chrome に表示されない

Javascript を使用して動的に表示する画像がいくつかあります。

ドキュメントの別の場所に表示することで、これらの画像をプリロードしています。

私は visibility:hidden や display:none などを使用していないことに注意してください。これらの画像は実際に見ることができます。

ただし、これは効果がないように見える場合があります。画像を動的に表示すると、リクエストが実際にサーバーに送信されていることがわかります...ページの他の場所に既に表示されている画像がはっきりと見えます。

この場合、Chrome の動作が明確に定義されておらず、画像を確実にプリロードしたい場合は、HTML5 オフライン サポート / アプリ キャッシュ / ローカル ストレージなどを検討する必要があるという話の教訓はありますか? 何か不足していますか？

私のサイトのホームページでは、サイトの他のページで使用されているフォントと画像をプリロードして、FOUC を回避したいと考えています。

これを行う最善の方法は何ですか？

フォントについては、現在ホームページにこのコードがありますが、もっと良い方法があると確信しています。

次に、style.css でテキストを非表示にします。

ありがとう

divにデータを入力するための大量のphpコードを含むホームページがあります（検証を伴うニュースレターのサインアップ、mysqlデータベースのコンテンツ、さまざまな静止画像を含む）。ページ全体は、背景のクロスフェードJavaScriptの上に構築されています。

それはすべてうまく機能し、見栄えがします.....ただし、ページをロードするときに表示される最後の「div」は背景画像です-すべてのdivがロードされ、背景画像が読み込まれるまで、効果的に大きな「空白」を作成しますレンダリングされます。

ユーザーがサイトに移動するときにこの空白が残らないように、最初の背景画像を何よりも先に読み込む方法はありますか？

ロールオーバーイメージの使用で見たことがありますが、ロールオーバーバージョンはスクリプトにプリロードできます-これは、そのようなソリューションを探すときに採用するのに最適な方法ですか？

どんな助けやアドバイスも大歓迎です-必要に応じてコードを表示してください-私のスクリプトにある量を考えると、それがあまりにも役立つとは思っていませんでした!!

ありがとうJD

イメージプリローダースクリプトを見つけようとしています。

いくつか見つけましたが、プリロードが終了したときにトリガーされるイベントをサポートしているものはありません。

これを行うスクリプトまたはjQueryプラグインを知っている人はいますか?

この質問がstackoverflowに適していることを願っています-そうでない場合は、すぐに削除してください。

私はJQueryで画像をプリロードすることを調べていて、このPreloading images with jQueryに出くわしました

プリロードされた画像を何らかの方法で呼び出す必要がありますか? 私はこれがimgを作成し、ブラウザが（少なくともそのページに対して）それをキャッシュしていると仮定し、プリロードされた画像をそのURIで使用するだけですか？

誰かがここで明確にできますか？

以下の関数を使用して、ajaxページに画像をプリロードしています。私のページには画像ギャラリーが含まれています。ただし、別のギャラリーリンクをクリックすると、現在のギャラリーのプリロードを停止する必要があります。何か助けはありますか？ありがとう...

解決しました...例を使用して動作するコードを次に示します...

私は単一ページのウェブサイトをデザインしています。サイトへのすべてのセクションはDIV要素でモーダルにポップアップするため、実際のブラウザページを離れることはありません。最初は、「display：none」を使用してcssですべてのセクションを非表示にし、ナビゲーションはそれに応じてそれらを表示および非表示にします。

ポートフォリオのセクションをまとめましたが、ポートフォリオアイテムごとにAJAXを使用するのが最適かどうか疑問に思い始めています。これは、ポートフォリオアイテムに大きな画像が含まれているためです。プリロードの賢明な制限についての大まかなガイドはありますか？すべてのアイテムがプリロードされている場合、HTMLファイルは非常に巨大に見えます。

これは少し一般的な質問であり、すべてをプリロードするのは悪い考えのように感じますが、私は急いで行きたくありません。要素が「display：none」に設定されている場合、ユーザーのコンピューターでどのような種類のリソースが使用されているのかよくわかりません（たとえば、RAMの問題ですか？）。

乾杯！:)

現在、ライトボックスが表示される前に、いくつかの大きな画像 (画像ごとに少なくとも 120kB、最大 2MB) をプリロードする、ある種の AJAX 画像ギャラリーのスクリプトを作成しています。私の質問は、これらの画像を順番にロードするか (たとえば、一度に 1 つの画像がプリロードされるのをプリローダーに待機させる)、または画像を並列にロードするかです。私の推測では、複数の http 接続 (並列キャッシュ) は、単一の http 接続よりも高速になります。ただし、古い IE では画像の並列読み込みでパフォーマンスに問題があったことをどこかで読んだことがあります。今でもそうですか？

プロジェクト全体を XHTML5 (HTML5 XML) でコーディングしており、最も一般的なブラウザー (Safari 5 以降、Chrome 15 以降、Firefox 8 以降、IE9 以降) の現在の安定版リリースのみを対象としています。AJAX'ing は、jQuery 'フレームワーク' で行われます。

データの読み込みに大きな影響を与える可能性のある根本的なネットワークの問題があることを認識しています (遅延、帯域幅、パケット損失に関する接続品質、ISP、プロキシ、サーバーなどによる最大許容同時接続の組み合わせ)。平均的なユーザーが、遅延が 80 ミリ秒未満で、帯域幅が 6 Mbps を超えるある程度適切な接続 (DSL、ケーブル、ファイバー) を使用すると想定してみましょう。