How do I apply a Loading effect before loading the page?

Question

How do I apply a Loading effect before loading the page?

Navigation

#1 by (5 votes)

5

Is there any way to use JavaScript / jQuery to measure loading a page and display a .GIF image until it loads?

I see examples, such as Preloader CSS3 , which only use CSS3, which makes me think that the loading is done in a "false" way, seeing that CSS3 has no ability to check whether the page was loaded or not (as far as my knowledge of CSS3 goes), but of any way, the tutorial is very incomplete and apparently does not work in IE.

Remembering that it is not interesting for me to display the page until it is loaded. And it would be in my interest that this applies to every page. Seeing that the waiting time is real, I do not see why showing the page being loaded.

javascript eventos

asked by anonymous 02.06.2014 / 03:55

1 answer

Problems with @ font-face of the same family What is service granularity?

score 5 · Accepted Answer

If your page is in need of a progress bar, it may be possible to reduce heavier files or optimize costly processes.

In fact, you can not use CSS for anything of the sort, just display fixed duration animations. Even with JavaScript and HTML, it is not possible to calculate the exact volume of data that has already been loaded from the total. In fact, this would not even be necessary, as the browser's own progress bar fulfills this role.

If the page is heavy because of the amount of images, you can simulate something similar with Progress.js (in English). This script displays a progress bar, calculated based on the images that have already been uploaded.

You may want to adapt the script to display progress on an image, such as a GIF, but at the beginning it is a (customizable) text box with a percentage value:

AnotherwaytodetermineprogresswouldbetoplacesnippetsofJavaScriptindifferentpartsofthepagethatwouldincrementaglobalvariable.Forexample:

porcentagem+=10;atualizarProgresso();

Butthismethodisevenmoreinaccuratethanthepreviousone,sincethecodewouldbetriggeredassoonasthefileswereopenedbythebrowser,notnecessarilyhavingitscontentfullyloaded.

Regardlessoftheprogressbar,youcanhidethepagewhileloadingusingamask,suchas jquery-loadmask

Source: Stack Overflow question in English