how to display a textual carousel while the page loading the images

I've got an image heavy web page. 200 images totaling 100Mb or so. I can do lazy loading them but I'd like to try a different technique.

Display a "page-loading-indicator" screen while downloading the images behind the scenes ( to ache ) but more importantly, in that "page-loading-indicator screen", display a few slogans nicely transitioning into each other to keep the user busy.

What techniques do I need to use here? Displaying a block of phrases one after another is no issue but how do we display them while page loading, and how do we take it away when the last image has downloaded?

Here is a demo of the custom event idea. We show a page is loading div and wait for the custom event, in the demo this is just triggered on a setTimeout. But it gives you the working principle.

document.addEventListener('DOMContentLoaded', () => {

  document.addEventListener('PageIsLoaded', pageLoaded);
  
  // dummy (this would actually be called when images are loaded)
  setTimeout(() => {
    console.log('loaded');
    document.dispatchEvent(new CustomEvent('PageIsLoaded'));
  }, 3000);

});

function pageLoaded() {
  document.querySelectorAll('div').forEach(d => d.classList.toggle('hide'));
}

.hide {
  display: none;
}

<div class="loading">The page is loading</div>
<div class="loaded hide">The page has loaded</div>