-2

見出しの合計がすべてです。ただし、サムネイルのスプライトとして長い（20x2000px）画像がある場合があります。スプライトの必要な部分が既にロードされているサムネイルに対してのみスプライトの表示を開始し、その間にローダーを表示できればいいと思います。

私が必要とするのは、上からどれだけの画像がピクセル単位で読み込まれたかを知ることだけです (それがプログレッシブではない場合)。ファイルサイズを使用して推定することを考えましたが、それは非常に不正確です.

誰もが持っている主な質問 -なぜこれを行うのですか?

100枚ほどのサムネイルを表示するページがあります。このページに、サムネイルの降順で生成されたサムネイルのスプライトがあると便利です。

ここに画像の説明を入力

そのようなページは既に存在します。スクリーンショットを添付します。スプライトがロードされている間、ユーザーは灰色のプレースホルダーを見ることができます。そのサムネイルのスプライトの必要な部分が既に読み込まれている場合にのみ、サムネイルを表示したい。

@Guyは理論的な質問のように聞こえます...以下の回答に対するコメントによると、10MBの「スプライト」をロードしている場合、間違っています。

いいえ、これが達成できれば問題ありません。これにより、ページが呼び出されるたびに呼び出しの数が 100 減少します。すべてがキャッシュされている場合でも、これは驚くべき速度の向上です。

4

3 に答える 3

1

あなたがやろうとしていることはわかりますが、要するに、できません。JavaScript でピクセルをカウントすることは、可能であれば (おそらくキャンバスで? 私はそうは思いませんが)、リソースを不当に消費するだけです。ただし、すべての画像を個別に (つまり、1 つのスプライトとしてではなく) ロードすると、ほとんどのブラウザーでデフォルトとして探している効果が正確に得られますが、より多くのリクエストが必要になります。

ソリューション？コンテンツ配信ネットワーク (CDN) を使用して、ブラウザーが 100 個の画像すべてを同時に取得できるようにします。必ずしもサーバーに負荷をかける必要はありません。

于 2012-07-05T03:07:59.070 に答える
0

編集：

さらに検索したところ、ここで解決策と思われるものが見つかりました。これは、ここで提供されている解決策に似ています。基本的な考え方は、AJAXリクエストを作成し、進行状況を監視することです。

私があなたを正しく理解しているなら、画像の転送が完了しておらず、本来あるべき場所にまだ表示されていない、ページが読み込まれている（または発生した後）短い期間を避けたいと思います。

遭遇する問題（これがページが読み込まれているシナリオの場合）は、プレースホルダー画像とスプライトがネットワークに到達するのを待っていることです。プレースホルダーが終了するまでに、スプライトはすでにそこに到達しているか、数ミリ秒遅れている可能性があり、上記の状況を回避していません。

スプライトが初めて要求されるマウスオーバーイベントなどを処理している場合は、ページの読み込み時にJavaScriptを介して呼び出すことでスプライト画像をプリロードできるため、スプライト画像はすでにキャッシュされて準備ができています。イベントが発生します。

于 2012-07-05T02:43:17.087 に答える
-2

私はすでに理論的な解決策を持っています。作業を開始する前に、私の考えに重大な問題があるかどうか誰か教えていただければ幸いです。

画像は、スクリーンショットの後にサーバー側でスクリーンショットが生成されます。したがって、すべてのスクリーンショットがスプライトにマージされた後、対応するエントリと共にサムネイル サイズ情報をデータベースに保存できます。

ユーザーがページにアクセスすると、スプライトのバイト数をチェックし続け、表示待ちのすべてのエントリをループし、値がエントリの「重み」以上かどうかをチェックし、表示または続行します。適当にループ。

于 2012-07-05T03:15:47.303 に答える