There isn't a fixed 500ms loading time. It advances slides by changing the background image of the central "pic" element. This is the JS to advance the slide:

   function increment(){
    if(imgNum < 141){
      imgNum++;
    }else{
      imgNum = 1;
    }       
    url = "url('img/vrg_google_doc_final_vrs03-"+imgNum+".jpg')";

    document.getElementById('pic').style.backgroundImage=url;
  }
  

The reason you see a flicker is because it takes time to load the next image, and until it loads you're going to see the black background. As you mentioned, the preloading images would solve this.

I resorted to holding the up-arrow key to trigger loading of a bunch of slides, then holding down-arrow to get back to where I was, and finally getting a smooth transition experience.

On mobile, the slides switched instantly. On Firefox Desktop it's like from hell.

Weird, how does that work? Is the mobile browser simulating the click and then noticing the next image to be loaded? Maybe the js is simple enough to prove that it's safe to do so, but wow.

For me, using Firefox on a Mac, the slides also switched instantly.

On Firefox for Windows 10 - instant slide transitions.

Ryzen 7 2700X, 32GB, 300/300 mbps connection.