多くのサムネイル画像（約100枚）を含むWebページがあります。サムネイルの1つをクリックすると、モーダルポップアップが作成されます。これは、実際にはiframe内の新しいWebページです。この新しいWebページには、1つの大きな画像が含まれています。
この問題は、親ページで100以上のサムネイルがすべてダウンロードを完了する前にユーザーがポップアップを開いたときに発生します。ブラウザは、既に取得しようとしているサムネイルよりもこの新しい画像を優先することを認識していないため、ユーザーはポップアップに大きな画像が表示されるまで長時間待つ必要があります。
この問題の解決策について何か考えはありますか？
そのページをロードすると、ブラウザはそれらのサムネイルに対する100件のリクエストをキューに入れます。リクエストキューからアイテムを削除する方法はありません。ブラウザによっては、同時に最大6つを要求する場合があります（このスレッドを参照）が、モーダルダイアログの大きな画像の前にキューに入れられます。（同じスレッドから）実行できるのは、モーダルダイアログイメージを別のサブドメインでホストして、ブラウザーがそれらをまったく別のサイトにあるかのように別のキューに配置することです。その新しいキューは、サムネイルリクエストと同時に実行できます。
すべての小さい画像にBASE64データURIを使用できます。ページが大きくなる可能性がありますが、一部のインストールでは、ページ全体の読み込みが速くなりました。
他のオプション-「キュー」はホスト名によるものであるため、他のサブドメインから大きな画像をロードします。
興味深い質問です。私はそのような状況に出くわしたことがありません。頭に浮かぶ回避策は、ユーザーがサムネイル画像を表示しているときにのみサムネイル画像を読み込むことです。
jQueryを使用している場合は、次のプラグインを使用してみてください。
これを解決する1つの方法は、小さなサムネイルを1つの大きなタイル画像に結合して、ページ上の画像の数を減らすことです。