Fancybox 2 を使用して画像のギャラリーをロードしています。イベント コールバックを使用しbeforeLoadて、ユーザーのビューポート サイズに基づいてオンザフライで画像の URL を変更しています。画像がプリロードされていない限り (デフォルトではプリロードされています)、これは完全に機能します。
Fancybox を起動する元の画像をクリックすると、beforeLoadイベントが 1 回起動され、ギャラリーにさらに 3 つの画像がプリロードされることに気付きました。これらのプリロードされたイメージは、beforeLoadイベントを発生させません。ただし、「次へ」をクリックすると、beforeLoadイベントが発生します。画像の URL を変更しているため、プリロードされた画像が実際に表示される画像とは異なることを意味します。これは帯域幅の浪費であり、ページの応答性が大幅に低下します。
理論的には、ページの読み込み時およびビューポートのサイズが変更されるたびに、ページ上のすべてのソース画像を変更できますが、このアプローチは好きではありません。beforeLoad画像がプリロードされているときに起動する方法はありますか? preloadそれともイベントをキャプチャする方法ですか？