JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height: 20000px;">&nbsp;</div>

JavaScript

b1 = 'http://fillmurray.com/200/300';
b2 = 'http://fillmurray.com/200/301';
b3 = 'http://fillmurray.com/201/301';
b4 = 'http://fillmurray.com/200/302';
b5 = 'http://fillmurray.com/202/302';
b6 = 'http://fillmurray.com/200/303';
b7 = 'http://fillmurray.com/203/303';
b8 = 'http://fillmurray.com/200/304';
b9 = 'http://fillmurray.com/204/304';
b10 = 'http://placekitten.com/200/300';
b11 = 'http://placekitten.com/200/301';
b12 = 'http://placekitten.com/201/301';
b13 = 'http://placekitten.com/200/302';
b14 = 'http://placekitten.com/202/302';
b15 = 'http://placekitten.com/200/303';
b16 = 'http://placekitten.com/203/303';
b17 = 'http://placekitten.com/200/304';
b18 = 'http://placekitten.com/204/304';

var imgs = new Array();
var per = 500;

function preloadImages() {
    for (i = 0; i < arguments.length; i++) {
        imgs[i] = new Image();
        imgs[i].src = arguments[i];
    }
}
preloadImages(b1, b2, b3, b4, b5, b6, b7, b8, b9, b10, b11, b12, b13, b14, b15, b16, b17, b18);

var cur_image_index = 0;
function switchImages() {
    var index = Math.floor($(window).scrollTop() / per);
    console.log(index);
    if(index != cur_image_index){
        $('body').css({
            backgroundImage: 'url(' + imgs[index].src + ')'
        });
        cur_image_index = index;
    }
}

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