JSFiddle - React, Tailwind, and code Playground

HTML

<div id="frontpage-slider">
    <div class="slide" style="background:url(https://i.imgur.com/S1OPVB6.jpg)" ></div>
    <div class="slide" style="background:url(https://i.imgur.com/fTb97EO.jpg)" ></div>
</div>

CSS

.slide{
    height: 150px;
    width: 100%;
}

JavaScript

jQuery(document).ready(function(){
	f3234_loadSlides();
});

function preloadPictures(pictureUrls, callback) {
    var i,
        j,
        loaded = 0;

    for (i = 0, j = pictureUrls.length; i < j; i++) {
	
        (function (img, src) {
            img.onload = function () {
                if (++loaded == pictureUrls.length && callback) {
                    callback();
                }
            };
           
            img.src = src;
        } (new Image(), pictureUrls[i]));
    }
};

function f3234_loadSlides() {
	if( jQuery('#frontpage-slider')[0] ) {
		var pictures = [];
		
		jQuery('#frontpage-slider .slide').each(function() {
			var bg = jQuery(this).css('background-image');
        	bg = bg.replace('url(','').replace(')','');
			pictures.push( bg );		
		});
		
        preloadPictures( pictures, function() {
			alert('all done');
		} );		
		
	}
}