replace background image when fully loaded.

incremental-bg.html

<style>
  body {
    width: 100%;
    background-repeat: no-repeat;
    background-position: 50% 21%;
    background-size: cover;
    background-image:
      /* This larger image will show up on top of the black and white, once it's loaded. */
      url(https://s.cdpn.io/23379/photo-sedona_1024x640@2x.jpg),
      /* Use this low-res, black and white image at first */
      url(https://s.cdpn.io/23379/photo-sedona_512x320.jpg);
  }
</style>

index.html

<style>
body {
  width: 100%;
  background-repeat: no-repeat;
  background-position: 50% 21%;
  background-size: cover;
  background-image:
    /* Use this low-res, black and white image by default */
    url(https://s.cdpn.io/23379/photo-sedona_512x320.jpg);
}
</style>
<script>
// compliments to https://stackoverflow.com/a/20285053/1586229
function toDataURL(src, callback, outputFormat) {
  var img = new Image();
  img.crossOrigin = 'Anonymous';
  img.onload = function() {
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var dataURL;
    canvas.height = this.naturalHeight;
    canvas.width = this.naturalWidth;
    ctx.drawImage(this, 0, 0);
    dataURL = canvas.toDataURL(outputFormat);
    callback(dataURL);
  };
  img.src = src;
  if (img.complete || img.complete === undefined) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
  }
}

toDataURL('https://s.cdpn.io/23379/photo-sedona_1024x640@2x.jpg', function(dataUrl) {
  // this callback function will only run when the image is fully loaded.
  document.querySelector('body').style.backgroundImage = 'url(' + dataUrl + ')';
})
</script>