CODEWITHSUNDEEP
javascriptuser-experience
Cyril N.
Cyril N.

Reputation: 39869

How to display a "Loading page" only if it will takes more than 2 seconds?

I'm facing a quite odd problem based on User Experience.

My project is a one page full JavaScript application. I decided to show a "Loading page" modal, but in local, this appears as a flash because the application is quickly loaded.

What would be best, is that if the application takes more than 2 seconds to load, it would display it (ideally, at the beginning of the loading, maybe by calculating how much to load and the speed of transfer?), and if shown, stays at least for 2/3 seconds (for avoiding the flash of show/hide quickly).

The problem I'd like to avoid, is show a "Loading" modal for my user that stays 2/3 seconds before it's best for their eyes, even if the app is ready 1/2 seconds after the 2/3 seconds delay.

Is there a proven way to do this ?

Note: I saw this post, which is a good start, but doesn't fix my problem exactly (show/hide flash can be produced).

Upvotes: 0

Views: 2788

Answers (2)

basilikum
basilikum

Reputation: 10526

I don't think you do yourself a favor by trying to calculate the estimated loading duration. So my advice would be to just show that modal everytime the page is loading and hide it as soon as the loading process is finished. With that way, there is no need for timeouts or something like this.

But if you must ensure that the modal is shown for at least 3 seconds, you can do something like this (but I personally am not a big fan of letting the user wait longer than he would have to):

//entry point (first script to run, ideally put in the <head> tag)
var initFinished = false,
    canHideModal = false;

setTimeout(function(){
   if (initFinished === true) {
       //hide modal
   } 
   canHideModal = true;
}, 3000);


//initialization stuff / page load / dom

document.addEventListener("DOMContentLoaded", init, false);

function init() {

   //...more init stuff

   //at this point everything is loaded
   if (canHideModal === true) {
       //hideModel
   }
   initFinished = true;
}

Upvotes: 1

Ramesh
Ramesh

Reputation: 163

you can use set time out function

setTimeout(function() {
      // your image to be displayed after particular seconds
}, 2000);

Upvotes: 0

Related Questions