How to insert black space between two consecutive images

In my slideshow images are shown one for one at random, preferable in FULLSCREEN. Since the aspect-ratio of the [mostly abstract] images are different I want to insert [imageless] black space inbetween the images to let the eye adapt like insertingwhitespacebetweenwords makes the text more readable. I think the lenght of black space should be, say one tenth of a second, just a blink of an eye, so to speak. So far I have tried to do so with setTimeout to delay the concatenation of the images in the show, without succes. Ofcourse, inserting black space must be repeated between the current and next imnage. In the motionpicture camera this [analogue] technique is wel known as Maltese Cross Mechanism, which blocks incoming light when exposed filmnegative is transported to the next frame. Since I do not want to use fadein/fadeout I need total black space instead. I'm told that the browser [its graphic engine] has a delay of itself of a few millisecs, but that is too short. Appreciate any suggestion and help. Relevant piece of code in my javascript:

var currand=0

function rotateImage(){
   var nextrand = Math.floor(Math.random()*(rimages.length));
     // compare current image with next image0.
   if (currand > rimages.length -12) {

      if (nextrand > rimages.length -12) {
        currand = nextrand - 12;
        document.images[0].src = rimages[currand];
      }
      else {
      currand = nextrand;
          document.images[0].src = rimages[currand];    
      }
  ...etc.


var paused = false;

document.onkeydown = function(evt) {
   evt = evt || window.event;
   if (evt.ctrlKey && evt.keyCode == 32) {
     paused = !paused;
   }
};

(function loop() {
   var rantime = Math.round(Math.random() * 7000) + 1000;
   setTimeout(function() {
      if (!paused) {
        rotateImage();
      }
      loop();
   }, rantime);
})();