I have already created it as follows. In the page header, I place all CSS files and jQuery and the page footer before closing the tag body
add the rest of the scripts and an embedded script, as in the example:
<html>
<head>
<meta charset="UTF-8">
<title>Exemplo</title>
<link rel="stylesheet" type="text/css" href="./css/estilos.css">
<link rel="stylesheet" type="text/css" href="./css/estilos1.css">
<link rel="stylesheet" type="text/css" href="./css/estilos2.css">
<link rel="stylesheet" type="text/css" href="./css/estilos3.css">
<script type="text/javascript" src="./js/jquery.min.js"></script>
</head>
<body>
<div id="loading"><img src="./img/loading.gif" alt="Carregando..."></div>
<div id="conteudo">
<!-- Restante do conteúdo da página -->
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#loading').hide('fade');
});
</script>
<script type="text/javascript" src="./js/script1.js"></script>
<script type="text/javascript" src="./js/script2.js"></script>
<script type="text/javascript" src="./js/script3.js"></script>
<script type="text/javascript" src="./js/script4.js"></script>
<script type="text/javascript" src="./js/script5.js"></script>
</body>
</html>
The shown example works as follows:
- The CSS and jQuery reference files are loaded
- When the browser starts rendering the page, the element
div#loading
is the first to be created.
It should contain a CSS class that sits on the rest of the page, such as a position:fixed; z-index: 10000;
or other to your liking. While the page is being mounted it is being displayed.
- When the browser finishes rendering the page, the event
onload
comes into action and the method jQuery(document).ready(...)
is executed, and within that method we hide the div#loading
That would be the closest to a "real loading". Another way would be to load only the javascript responsible for this "loading" and another to search the rest of the page via AJAX as in the @Marcio reply, this would be a little closer to "loading real", but a little more laborious, since you would have to worry enough about what you need to seek.
Do you want that image to be shown whenever external content is searched? do you have ajax on the site? it would be easier to limit this to ajax, I don’t see how to know if the browser is receiving data...
– Sergio