問題タブ [image-preloader]

次のコードを使用して、画像ギャラリーに画像をプリロードしています。

$(window).bind('load', function(){

});

別の基本的な javascript/jQuery プリロード スクリプトを修正し、変数を追加して現在の画像の alt タグから数値を取得し、ギャラリーでその直前と直後 (n+1 n+2 n-1) にある画像をプリロードします。 . これは機能しますが、ちょっと醜いかもしれないと思います。

私がやりたいことは、ディレクトリ内のすべての画像を含む別の配列を追加または呼び出すことです。これにより、前と次の画像が読み込まれた後、現在のページは引き続き他の画像をプリロードし、ユーザーとして将来表示できるようにブラウザのキャッチに保存しますギャラリーを移動します。

理想的には、この 2 番目の配列は、すべてのページを個別に更新する必要がないように、外部の .js ファイルから呼び出されます。(または、スクリプト全体を各ディレクトリの外部 .js ファイルに保存し、そのディレクトリの内容に基づいて残りの配列を埋める方が簡単でしょうか?)。

Web デザインは私にとって単なる趣味です (私は写真家です)。そのため、JavaScript に関する私の知識は限られています。事前に構築された機能をカスタマイズし、コードの断片をコラージュする程度です。

誰かが私のコードを変更する方法について正しい方向に私を向けることができれば、本当に感謝しています.

前もって感謝します、

トム

Marcofolio スライドショー (ここではhttp://www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html )とうまく連携する、機能する jQuery 画像プリローダーを見つけようとしています。

同じスライドショーがフィラデルフィアの Web サイト ( http://www.visitphilly.com/ ) でも使用されています。プリローダーが呼び出されています。

また、次のプリロード コードを使用してみましたが、状況が改善されないようです (Safari ブラウザーでの読み込みが最も遅いようです)。

賢明な誰かが visitphilly サイト要素を調べることができれば、私がここで明らかに見逃しているものを見つけることができるかもしれません。または、この特定のスライドショーに役立たないように思われるものをいくつか試したので、プリロード プラグインの提案をいただければ幸いです。

ありがとうございました！

私はjQueryを使用して、php配列から画像の配列を構築しています。これらの画像をループして、すべての画像が読み込まれるまで少し読み込みgifを表示しながら、画像をプリロードしたいと思います。

現時点では、さまざまな方法を試しましたが、ページの残りの部分は常に読み込まれているように見えるため、画像はプリロードされていますが、ページが残りのコンテンツを読み込む前ではありません。

これが私が持っているものです：

ご覧のとおり、＃origはpreload.gifを表示するように設定されており、画像をプリロードしてから、配列で現在選択されている画像を変更してフェードインする必要があります。これは発生しません。ページが読み込まれた後、gifが表示されず、画像がしばらく読み込まれ続けます。

アドバイスしてください、事前に感謝します！

ページ上のすべての画像をプリロードする画像プリローダーに取り組んでいます。私のアプローチは次のとおりです。

onDomReady, loop through $("*")//DOM の準備ができたらすべての要素を通過する

• if $(this).tagName.toLowerCase() == 'img'、属性を読み取りsrc、その画像をプリロードします
• それ以外の場合$(this).css("background-image") != "none"は、 background-image プロパティを読み取り、その画像をプリロードします

私の問題は、このアプローチが :hover クラスを認識しないことです。これは通常、とにかくプリロードする必要がある画像です。

私がやりたいことは、すべての要素をループしながら、:hover 疑似クラスの存在を確認し、そのクラスの "background-image" プロパティの存在を確認できるようにすることです。

私は本当にこのアプローチに固執したいと思います.a）プリロードしたいすべての画像を明示的に指定する必要がなく、b）CSS内の相対パスを「背景画像" プロパティは、ページに対する相対的なパスを提供します。

だから、私の質問は：

jQuery を使用して、要素の :hover 疑似クラスの CSS プロパティを読み取ることは可能ですか? そうでない場合、何か提案はありますか？

ありがとう！

私は画像の配列を持っています

私はこの配列を循環し、間隔に基づいてそれらをdivの背景にします

編集：setInterval関数を実行する前に、3つの画像すべてをプリロードする必要があります。

前もって感謝します！！

基本的に、ページが開くと、スライドショーに含まれる画像は一時的にスタックされてから、スライドショーに正しく配置されます。

これは、DNNがスクリプトファイルを実行する前に、最初にHTMLにある画像をレンダリングするためだと思います。これにより、正常に動作する前に、画像のリスト（<li>タグ内にある）が上下に配置されます（約2秒間）。

Ivが試したこと：

1. スライドショーを呼び出すスクリプトをHTMLの最後に配置します（誰かがこれを提案しましたが、なぜそれが機能するのかわかりません）。
2. 最初に画像を含むdivを非表示にしてから、ドキュメントが読み込まれるとjqueryとcssを使用してdivを表示するスクリプトを使用します。（例：表示：なし>>>表示：ブロック）

興味のある方は、サイトへのリンクをご覧ください（Bitlyを使用）：http：//bit.ly/gNfWRx

とても有難い

ピーター

私はJavaScriptを使用して、次のコードでいくつかの画像をプリロードしています:

これは問題なく動作します - firebug では、各反復の後に各イメージのダウンロードが開始されるのを確認できます。

私の問題は、実際のダウンロードが完了するまでブロックしたいということです。つまり、すべての画像のダウンロードが完了するまで、「画像のダウンロード」ダイアログをユーザーに表示したいと考えています。

現在、プリロード ループが実行される前にダイアログを表示する (そしてループが完了した後にダイアログを削除する) と、実際のダウンロードが完了するのではなく、ダウンロード リクエストがキャプチャされるだけです。

実際のダウンロードは非同期のようですが、すべてのダウンロードが完了するまでブロックする方法はありますか?

複数の画像を含む単純な Web ページを作成しましたが、ユーザーがそのページにアクセスすると、ブラウザはすべての画像を一度にではなく、1 つずつ読み込みます。

代わりに、最初にページの中央に「読み込み中」のgifを表示し、次にすべての画像がダウンロードされたら、Webページ全体を一度にユーザーに表示したい..

これどうやってするの？

ダウンロードの進行状況を追跡するようにプリローダーに命令するにはどうすればよいですか?

画像をキャッシュにロードし、完了時に別のページにリダイレクトするチュートリアルに出くわしました。私は画像の配列でこれを行いたいと思います。それらがすべて読み込まれると、新しいページにリダイレクトされます。これはチュートリアルでも言及されていますが、完全ではありません。私はそれを行うためにこのコードを再編成しようとしましたが、私は完全な JavaScript 初心者であるため、2 つを組み合わせて機能させることはできません。

ここにウェブサイトがあります http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317

誰かがコードを投稿できれば、とても感謝しています。また、背景画像が大きいサイトのプリローダーとして使用すると、多くの人が役立つと思います。

乾杯

アップデート

ありがとうルーク、私は以下のコードを試しましたが、残念ながらまだ喜びはありません..何かアイデアはありますか???

引用符