Add a splash screen to your Web application

. NET developers must be familiar with the following screen:

This is the start screen of the universe's first IDE Visual studio, which is called splash (or Splash Window). Similarly, Javar must not be unfamiliar with Eclipse's splash screen. Not only the IDE, but many desktop programs will have this splash window, which is displayed when the program is initialized.

The most popular non-Adobe design software In this regard, after all, is art-born. Bo Master and slave PS 8.0 with, each upgrade new version excited is not new features, first of all excited new start screen. Is the latest cc version of PS splash screen. The visual effect of a shocking force. The claws are unmatched.

The splash screen is not unique to the desktop program and can be fully implemented in our web page. And with the passage of time, the Web application now more and more complex, loading is also very time-consuming, a splash screen seems to be very necessary, is not it.

such as Google's Gmail, if the full-screen operation, a native app feel.

Here's what we're going to add to our web app, like Gmail's splash screen. The program can be very slag, if the surface of Kung fu in place can also appear high-end atmospheric grade.

Effect Preview Please click on my code please click on my

Acquisition of Progress

Show still picture OK, if your launcher screen is going to show the progress of the program, a tricky question comes up, how to get the progress. After a lot of research (the students who have written the paper know, like ' after a lot of experiments show ... ') the expression is likely to have only done an experiment to begin to write the conclusion) I found that there is no way to get the actual download progress of a page! Of course, do not rule out my ignorant, if you know such a method please tell me.

For asynchronous operations in the page, it is possible to listen to progress. But also score the situation. In the HTML5 specification, Ajax has more than one progress event that can get the completion of an asynchronous operation, but only if the event.lengthcomputable attribute is true. That is, we can know the size of some of the requests, but more often the size of the content returned by the server is indeterminate, and even if you listen to the progress event, you cannot get the actual progress of the operation.

In that case, then we should not be so dead, specific to a few percent of significance, our aim is to improve the user experience, in the process of waiting for the user to see something, or there is a living moving things to indicate that the program is still running instead of the wrong card dead. So show the user A moving progress bar (I believe most of the programs with the progress bar are doing the same thing) until the page is fully loaded and the progress bar is 100%.

Episode: As I explore how to get the real download progress of the page, Research Pace.js Code, a very good page loading progress plug-in, found that his internal is so dry, the page shows that the progress is not real return to the implementation of the page loading progress, but constantly increased, and so on, and then dragged to 100% page load. Of course, the library is relatively well written, dealing with various situations such as ajax,web socket. The other is Gmail, after a lot (there may be only two or three times, please do not take it too seriously) after the Refresh page to try, I found a rule, its progress bar will go all the way to a point then stop, and then run to the end! Before the conclusion. (Google, however, has a smelling engineer who does not rule out what high-tech algorithms he uses to accurately return the progress of page loading.) Anyway, if my conclusion here is wrong, please don't bother me too seriously.

Nprogress

For convenience, this JS library uses nprogress to display animations. It provides a handy number of APIs for us to use.

Nprogress.start ()-Start progress bar

Nprogress.set (0.4)-Set the progress to a specific percentage position

Nprogress.inc ()-Little increase in progress

Nprogress.done ()-marks the progress bar as complete

Define Our splash screen

Okay, here's the idea. Below we begin the construction without technical content.

In particular, the first page shows only our pre-defined splash screen, which fills the entire display and Z-index is set to the highest page.

Here you can borrow the code Juri published in his blog, but we use the techniques mentioned in my previous post, "Cold Front knowledge collection", to store the HTML code in a script tag.

<script type= "text" id= "splash-template" >    <div class= "Splash card" >        <div role= "Spinner" >            <div class= "Spinner-icon" ></div>        </div>        <p class= "lead" style= "Text-align: Center "> Don't come back, go away ...</p>        <div class=" Progress ">            <div class=" mybar "role=" bar ">            </div>        </div>    </div></script>

This splash screen will be displayed the first time after the HTML is loaded. You can then do this by calling Nprogress.start () to start the progress bar at the very beginning of the page, and in the page covered under this splash screen, continue with the initialization of our program, and do some other very time-consuming operations. For example, if you think of Gmail, the first page may only show the progress bar of the basic HTML and JS code, and then need to request a large number of messages to the server, the data received, then organized into HTML generated mailing list append to the page, but this process is blocked by the progress bar, So we can't see. Wait until everything is ready, then call Nprogress.done () to hide the progress bar. What you see here is a full page.

Order of Events

The Window.onload event is completed throughout the page, including all of the pictures, IFRAME, etc. So, you can be sure that there is no problem and the logic is correct to get 100% progress in this event.

Determine when to end and see when to start. Now that we're going to show splash window and the splash screen template defined before the operation, it means that we'll have to wait until we splash the HTML loading of the screen section before we start. So, the conclusion is that the progress bar began to put the code in this part of the HTML code, but this HTML interpolation JS is very bad, so the final decision is placed in the $ (document). Ready (), because this event is triggered after the page HTML is loaded, But only DOM, not including other such as the above mentioned image, IFRAME, etc., so it is more than window.onload first trigger.

So add the following code to the head tag of the page:

$ (function () {    nprogress.configure ({        Template: $ (' #splash-template '). html ()    });    Nprogress.start ();}); $ (window). Load (function () {    nprogress.done ();})

In fact, the more scientific approach in practice should be, the page is only about the progress bar code, the content of the program all through Ajax to fill the page, and then in the page to monitor all the return of Ajax.

Simulate time-consuming operations

Everything is ready, but one thing that needs to be solved is how to simulate time-consuming operations. We're going to do this now. It's not time-consuming to see slow loading effects, and local testing, putting dozens of pictures will be done quickly.

Of course, you can use settimeout to achieve the goal, but not too scientific, or to make a real point. So we put an IFRAME in the page, referring to the page from other sites, so how much time is loaded.

So the final code for this example is almost like this:

Html:

<!doctype html>
Add some flattering styles:
Css:
html,body,iframe{margin:0;padding:0;} #nprogress {position:fixed;top:0;right:0;bottom:0;left:0;background-color: #f7f7f7; z-index:999;}. Spinner-icon{display:none!important;}. Splash {    position:absolute;    top:40%;    left:0;    right:0;    Margin:auto;  }  . Splash img {    display:block;    Margin-left:auto;    Margin-right:auto;    height:100px;    width:100px;  }  . Card {    background-color: #f7f7f7;    padding:20px 25px 15px;    margin:0 Auto 25px;    width:380px;  }  . mybar {    background: #29d;    height:10px;  }  . Progress {    height:10px;    Overflow:hidden;  }
You can now run the page to see the effect. All right, that's all. Effect Preview Please point me
Reference
 
 

  
  
 
   
Intercept Page Load:https://developer.mozilla.org/en-us/add-ons/overlay_extensions/xul_school/intercepting_page_loads
 
   
Gmail-style Progress bar When page is loading http://stackoverflow.com/questions/8020929/ Gmail-style-progress-bar-when-page-is-loading
 
   
http://www.gayadesign.com/scripts/queryLoader/
 
   
Https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress
 
   
http://api.jquery.com/jQuery.ajax/
 
   
Http://stackoverflow.com/questions/15328275/show-progressbar-while-loading-pages-using-jquery-ajax-in-single-page-website
 
   
http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/
 
   
http://github.hubspot.com/pace/
 
   
http://onextrapixel.com/examples/youtube-like-ajax-loading-bar/
 
  
 
 
Add a splash screen to your Web application