1

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?

Average Joe
  • 4,521
  • 9
  • 53
  • 81
  • Are you code loading the images, or just waiting for DOM loading? If code loading consider using a custom event, trigger it when you have enough images to begin presentation. So your DOM loaded listener would trigger your 'page loading' code and the custom event would stop it and display the page itself. – Bibberty Feb 26 '19 at 00:48

1 Answers1

0

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>
Bibberty
  • 4,670
  • 2
  • 8
  • 23
  • Thank you Bibberly, not only understanding but also solving it with a demo. What do you recommend to load those 100 images in the background and how will I know th 100th has loaded? One option to load them in an img tag in an invisible iframe and when that iframes page loaded event fires, send that insight to the parent and at that time parent can assume all of the images in the browser cache! But this is a mickey mouse solution. :) What would you do instead? – Average Joe Feb 26 '19 at 09:27
  • I think you would want to load the images in batches. Does it really need all 100 to be viable for the user? If the page is presentable with the first 10 then that is where I would trigger the custom event. Can use Javascript to background load the images of a JSON data set. – Bibberty Feb 26 '19 at 21:19