javascript - 映画のように背景を変更するjQuery .scroll

Question

200 枚の画像を使用して Web ページの背景画像を変更し、動画のように再生しようとしています。私のコードは機能していますが、スクロール時に画像が変化するとトランジションがちらつきます。スクロール中に CSS が更新され、ちらつきが発生するようです。これは Chrome と Safari で非常に顕著ですが、FF でも同様です。FFの方が滑らかに見える。変。物事をスムーズにする助けが必要です。以下のコードを使用しています。トランジションをスムーズにし、より映画のようにするための助けがあれば幸いです. 私はjqueryは初めてですが、プログラミングのバックグラウンドがあります。どんなアドバイスでも大歓迎です！

私はほぼ3日間調査しました。.htaccess ファイルを更新すると、ファイルのヘッダーが期限切れにならないように設定され、ブラウザーが 304 を送信するようになると言う人もいます。テスト方法はわかりませんが、以下に私のコードを示します。

var pics = []; // CREATE PICS ARRAY

    //PRELOAD FUNCTION TO SET UP PICS ARRAY IN MEMORY USING IMAGE OBJECT
function preload(){
    for(i = 0; i < arguments.length; i++) {
        pics[i] = new Image();
        pics[i].src = arguments[i]; 
    }
};
preload(
'bgImage/1.jpg'
,'bgImage/2.jpg'
,'bgImage/3.jpg'
,'bgImage/4.jpg'
,'bgImage/5.jpg'
); // THERE ARE 200 TOTAL IMAGES THAT WE ARE LOADING...

function switchImage() {
var s = $(window).scrollTop();
var index = 0;
if(s>   10  ){index =   1   ;}
if(s>   20  ){index =   2   ;}
if(s>   30  ){index =   3   ;}
if(s>   40  ){index =   4   ;}
if(s>   50  ){index =   5   ;}
// THERE IS 200 IF STATEMENTS IN TOTAL
// THE ODER OF THE IMAGES STARTS IN THE MIDDLE AND WE HAVE TO ADJUST DEPENDING ON POSITION
// USING THE IF STATEMENTS WAS THE EASIEST SOLUTION
$("body").css('background-image', 'url(' + pics[index].src + ')');
};

$(document).ready(function () {
switchImage();
//alert("images and dom loaded");
});

$(window).scroll(function () {
switchImage();
});