jquery - CSSの背景画像はjQueryのパフォーマンスに影響しますか？

Question

幅が約10,000ピクセルのページがあります。

ユーザーがスクロールすると、ページが右から左に移動し、水平方向にスクロールします。

ページに複数のdivがあり、それぞれに背景画像があります。各divの背景サイズは、画像が各divの高さに応じて拡大縮小されるように設定されています。

.examplediv {
    background-image:url('myimage.jpg');
    background-size:contain;
    height:80%; 
    width:200px;
}

私のページは、Idが.exampledivを持つポイントに到達するまで比較的スムーズに上にスクロールし、そこでジッター/ジャークを開始します。

質問は何ですか、誰かが以前にこの問題を経験したことがありますか、マークアップに空のdivタグを残すよりもcssに画像をロードするのが遅いですか？：contain値はすべてのスクロールで再計算され、速度が低下しますか？

score 1 · Accepted Answer

問題はbackground-size、ブラウザを使用すると実際には画像がキャッシュされないため、画像を何かで覆うなどのすべてのイベントの後に、もう一度レンダリングする必要があることです-大きな画像では、目に見える遅れが生じます

score 0 · Accepted Answer

すべての画像が実際に必要なサイズよりも大きくならないようにします。また、Photoshopでは、Webの品質をかなり低く設定できます。

Photoshopでsaveforwebを使用すると、2upビューで古い画像と新しい画像を同時に表示できます。

2 に答える 2