HTML5 video swap with GIFs

So I'm relatively new to JQuery and Javascript but have a basic understanding and ability to Frankenstein. I have an ugly script that works just fine except that it's load times become insane. Currently, I have an HTML5 video displaying the animation as a full screen background and as the site drops down to mobile size, the idea is to swap the HTML5 video for 1 second GIF sequences that swap out to avoid the iOS restrictions on autoplay. I currently have a script that swaps the background image of the body every second to the next GIF but the 1 second GIF sequences still run above 1mb and cause a lot of of blank space in the loading. There are roughly 30 GIF sequences that run 1s each. Is there a simple way to preload the GIFs and display them as they become ready or is there a better option? Possibly preload 5 of them before displaying and then load one at a time thereafter, as they become available. Is there a way to use the script only at a certain window size and to also load lower resolution gif sequences until the higher ones become available?

$(function() {
var body = $('body');
var backgrounds = ['url(mike-gif-1-oo.gif) no-repeat center center fixed',   'url(mike-gif-2-oo.gif) no-repeat center center fixed','url(mike-gif-3-oo.gif)   no-repeat center center fixed','url(mike-gif-4-oo.gif) no-repeat center center   fixed','url(mike-gif-5-oo.gif) no-repeat center center fixed','url(mike-gif-6-   oo.gif) no-repeat center center fixed','url(mike-gif-7-oo.gif) no-repeat center center fixed','url(mike-gif-8-oo.gif) no-repeat center center fixed','url(mike-gif-9-oo.gif) no-repeat center center fixed','url(mike-gif-10-oo.gif) no-repeat center center fixed','url(mike-gif-11-oo.gif) no-repeat center center fixed','url(mike-gif-12-oo.gif) no-repeat center center fixed','url(mike-gif-13-oo.gif) no-repeat center center fixed','url(mike-gif-14-oo.gif) no-repeat center center fixed'];
var current = 0;

function nextBackground() {
 body.css(
'background',
 backgrounds[current = ++current % backgrounds.length]
 );
  body.css({'-webkit-background-size': 'cover',
  '-moz-background-size': 'cover',
    '-o-background-size': 'cover',
    'background-size': 'cover' });

  setTimeout(nextBackground, 1000);
  }
 setTimeout(nextBackground, 1000);
 body.css('background', backgrounds[0]);
 body.css({'-webkit-background-size': 'cover',
 '-moz-background-size': 'cover',
    '-o-background-size': 'cover',
    'background-size': 'cover' });
   });