How to apply a Loading effect before loading the page?

Question

Is there any way to use Javascript/jQuery to measure the loading of a page and display an image. GIF until it is loaded?

I see examples, like Preloader CSS3, which use only CSS3, which makes me think that the loading is done in a "fake" way, seeing that CSS3 has no ability to check whether the page was loaded or not (as far as my CSS3 knowledge goes), but anyway, 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 all pages. Seeing that the waiting time is real, I don’t see why to show the page being loaded.

Answer 1

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

In fact, it’s not possible to use CSS for anything of the kind, 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, that wouldn’t even be necessary, since 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 (page in English). This script displays a progress bar, calculated based on the images that have already been loaded.

Maybe you can adapt the script to display progress in an image, like a GIF, but at first it is a text box (customizable) with the value in percentage:

Another way to determine progress would be to place Javascript snippets in different parts of the page, which increment a global variable. For example:

porcentagem += 10; atualizarProgresso();

But this method is even more inaccurate than the previous one, since the code would be triggered as soon as the files were opened by the browser, not necessarily having their content fully loaded.

Independent of the progress bar, it is possible to hide the page while loading using a mask, such as jquery-loadmask (page in English):

_{Source: Stack Overflow Question in English}