gif.js

function gifAllTheThings(images) {
  var div = document.getElementById('my-div');
  var index = 0;
  var duration = 400; // duration of each image. 400 is arbitrary. change as you please
  setInterval(function() {
    var image = images[index % arr.length];
    div.style.backgroundImage = 'url(' + image + ')';
    index++;
  }, duration); 
}

function preloadImages(images, callback) {
  var loaded = 0;
  
  var load = function() {
    loaded++;
    if (loaded == images.length) {
      callback();
    }
  }
  
  images.forEach(function(image) {
    var i = new Image()
    i.onload = load;
    i.onerror = load;
    i.src = image;
  });
}

var images = [url1, url2, url3, url4];
preloadImages(images, function() {
  gifAllTheThings(images);
})