問題タブ [image-preloader]

説明

jQuery 1.8以降、このloadイベントは非推奨になりましたが、特定の回避策を使用するだけで、画像が読み込まれたかどうかを（キャッシュにある場合でも）検出することができました。したがって、イベントの非推奨は、少なくとも画像のページへのロードが終了したことを検出するための開始点として提示されたため、実際には非常に苛立たしいものです。

それにもかかわらず、それは廃止されたので、私は答えを見つけることを期待してこの質問をしています。したがって、私と、すぐに同じ問題に遭遇する可能性のある他の人を助けてください。

例（jQuery 1.8より前）

プラグインを使用せずに（これはごくわずかなコードで実行できるはずなので、プラグインは不要です）、ページ上の各画像が読み込まれたときに関数を呼び出したいと思います。

このようなもの（これは非推奨のため機能しません）：

私の質問

loadイベントが存在しないので、これを達成する方法を知っている人はいますか？

注意：これを（現在）達成する唯一の方法がJavascriptnew Imageオブジェクトを使用することである場合、他の人が私よりもあなたの助けを必要としているので、私を助けるためにあなたの時間を無駄にしないでください。私はこのコードを書くことができます、それはとても基本的な何かのために少し長い間巻き込まれているようです。

imageJavascriptオブジェクトを使用せずにこれを達成する方法がないことを確認するために、私は単にこの質問をしました

もちろん、私はどんな助けにも非常に感謝します、あなたの助けをもっと必要としている他の人がいるとき、私はあなたが私に多くの時間を費やしてほしくないだけです。:-)

HTML5キャンバスを使用してゲームを作成しています。ゲーム内で必要なすべてのスプライトを含む大きなスプライトシートがあります。アセットのプリロード手法として最適なものについて少し読んだことがありますが、具体的なものは何も見つかりませんでした。

そこで、CSSスプライトシートという1つの手法を選択することにしました。http://www.spritecow.com/を使用して、spritesheet.gifファイルをロードし、CSSコードを生成しました。問題は、javascriptとcanvas要素内の個々のスプライトを実際に使用する方法についてのチュートリアルが見つからなかったことです！

誰かが私に手を差し伸べてもらえますか？他のより優れたプリロード手法またはライブラリを知っている場合（可能であれば、画像とサウンドをプリロードできます）。

編集：jQueryを使用したソリューションも問題ありません。

CAKE PHP MEIO アップロードを使用して、個別にアップロードするのではなく、ディレクトリからプログラムで取得した 50 枚の写真のサムネイルを生成したいと考えています。

いくつかの meio アップロード ライブラリ関数を呼び出すことによって可能性があります。

このようなファイルをアップロードする方法はありますか。

ウェブサイトのカルーセル用に画像をプリロードする方法を探しています。それらはページの読み込み時に読み込まれます。それを行うためのモダンでエレガントな方法はありますか？

私は成功せずに試しました：

そしてCSSプリロード：

私は自分の研究に役立つウェブページのフラッシュカードを作成しています。質問すると画像が表示され、回答を選択すると別の画像が表示されます。回答を選択した後、回答画像がダウンロードされるのを待つのではなく、質問画像を表示した直後に回答画像のプリロードを開始します。私のプリローダーは：

私の理解では、これはブラウザに画像ファイルをキャッシュします。画像タグのsrcにファイル名を割り当てると、画像ファイルが表示されます。画像ファイルがImage（）オブジェクトに関連付けられると、そのファイルがsrcに割り当てられると、ブラウザはキャッシュから画像を提供します。

私の答えに満足している場合、フラッシュカードはデッキから引き出されます。私の答えに満足していない場合、フラッシュカードはパックに戻り、後で尋ねられます。

デッキに戻されたフラッシュカードが再度要求されると、応答画像に対してプリロードが再度呼び出されます。

私の質問は、プリローダーを2回目以降に呼び出すと、ファイルがサーバーからダウンロードされて新しいImage（）オブジェクトに割り当てられるのか、それともブラウザーのキャッシュから読み取られるのかということです。

よろしくお願いします

パーセンテージを示すテキストを含むjavascript（またはjquery）プログレスバーを作成する方法に関する適切な情報を見つけるのに問題があります。

プラグインは必要ありません。必要なものに適応できるように、プラグインがどのように機能するかを知りたいだけです。どのように画像をプリロードし、プリロードされる画像の数の変数を取得しますか。また、すでにロードされている画像の数に基づいて、html / cssを変更したり、関数を呼び出したりするにはどうすればよいですか？

Google の助けを借りて、小さなプリローダー スクリプトを作成しました。

head最大限の効果を得るには、この関数を HTML ファイル内で呼び出す必要があります。本当に宣言する必要がありvar i = 0;ますか? プリロードが完了したら、別の関数を起動するにはどうすればよいですか?

また、運営しているWebサイトでこの機能を実装する方法をお聞きしたいです。img100 個のタグを持つページがあるとします。ソースを手動でコピーしてimages配列に貼り付ける必要があると思いますよね？ループでそれを行うには、DOM の準備ができている必要があります。これは、画像の読み込みが既に開始されていることを意味しますか?

プリロードは SEO に影響しますか?

プリロードのより良い jQuery の方法があれば、それで問題ありません。

ソース画像からターゲット画像にサイズを変更する必要があります。これは、次のコードを使用してすでに行ったことです。

そして私は使用しています

画像スケーリングライブラリ

しかし、ここでわかるように、実線ではなく破線が表示されます。

誰かが私に私の目標を達成する方法を教えてもらえますか？

ありがとうMihirParekh

検索しましたが、Bootstrap Carousel を使用して画像をプリロードする方法を見つけることができませんでした。多くの画像を含むポートフォリオ サイトを構築していますが、現在、すべての画像が読み込まれた後、Bootstrap カルーセルが適切に機能します。

何か案は？

画像がキャッシュにあるかどうかを知るには、Firefox で mozIsLocallyAvailable() を使用できます。クロムやIEからそのようなことはありません。

他の方法を知っていますか？

「304 not modified」をAjaxでチェックしてみましたが、Ajaxは独自のキャッシュシステムを持っているようです。(ブラウザを閉じるたびに ajax キャッシュが削除されます)

私の目標は、訪問者がいつキャッシュを消去したかを検出して、「バックグラウンド プリロード」システムを再起動できるようにすることです (画像が多いゲーム用です)。AppCache について少し聞いたことがありますが、最大 40 MB の画像を保存できるかどうか、ページの読み込みが完了したらダウンロードできるかどうかを知るには十分ではありません。

よろしく。