Tag:csshtmlhtml5javascript
Article From:https://segmentfault.com/q/1010000012145126
Question:


When you open the page, show this first, wait for window.onload to hide it, and how to control it to 100% when the page is loaded.

Answer 0:

I don’t know how to do what you want, but I think of the idea: hide all the elements of the page first, then let the progress bar animation load to 100%, and finally control the page display.
I don’t know if you can meet your needs.

Answer 1:

1 Cover body with white
2 The number of img traversing the web site and backgroundImage statistics is 100 divided by this number to get a number of “I”, which is the distance of a graph moving by the progress bar.
3 Use imagesLoaded to judge the progress of each graph and increase the distance calculated just now.
When the number of pictures in load = = the number of web pages, let the progress bar and white mask fadeOut.
complete

Answer 2:

You should need this pace.js – Web page to automatically load the progress bar plug-in.
Example of official network

Answer 3:

In general, the progress bar of this page is pseudo progress bar, my blog also has this thing, the principle is very simple, first use the superposition random number to increase the progress to 95%, but in the page onload, the progress is added to 100, that is, the network is not good, the progress bar may be in 95% cards for a long time.

Of course, there are many libraries that monitor real progress on the Internet, but people think that it is just an icing on the cake for the whole web page, and whether it is worth spending too much energy and resources to do it, it needs to be considered.

Put on my pseudo progress bar code:

var progress = 0
var progressTimmer = null
var progressBar = $('#J-header-progress-bar')

function progress_func() {

  if (progress < 95) {

    progressTimmer = setTimeout(function() {
      progress += 5
      progressBar.style.width = progress + '%'
      progress_func()
    }, Math.random() * 500 + 40)

  }

}

progress_func()

window.addEventListener('load', function() {

  progress = 100
  progressBar.style.width = '100%'
  clearTimeout(progressTimmer)

  setTimeout(function() {
    progressBar.classList.add('completed')
  }, 100)

}, false);

Answer 4:

This is well done, but the effect is obvious if the content of the page is more obvious.
1、Write a progress bar like you on the top of the body, and adjust the location and style.
2、In the following content, a script script is executed every distance to control the width of the progress bar and change the percentage value shown above.
3、In the first sentence of the window.onload function, let the progress bar div hide or remove the node.

There are some places of attention here:
1、If you want the progress bar to have a good schedule display experience, plus the CSS transition effect, you need it.
2、The progress bar is placed on the top of body, which is easy to control such as location and size.
3、scriptCan be placed in any place, this is also to every several div or other nodes to execute the script to change the width of the internal progress bar, how much to see the structure of your page, the picture is short, all the text nodes are separated, this is all right.
4、Do not write window.onload in the script placed in body, otherwise you will have to play like this.

In a word, remember a wordThe loading of the page is executed from top to bottom

Leave a Reply

Your email address will not be published. Required fields are marked *