View content only after full page load

Question

View content only after full page load

Asked 5 years, 3 months ago

Viewed 619 times

2

Hello, I have the following code snippet below:

Code

div#container{
	position:absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left:0px;
	background-color: #eee;
	display: block;
}

div#loader{
	border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;	
	position: fixed;
	top: 0px;
	left:0px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="utf-8">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>PÁGINA LOAD</title>
	<link rel="stylesheet" href="css/style.css" media="screen"/>
	<script src="js/jquery-2.1.3.js"></script>
</head>
<body>
	<div id="container">
		<div id="loader"></div>
		<div id="content">
      <p>Exibir meu código PHP aqui após o carregamento total da página</p>
		</div>
	</div>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/jsor/jcarousel/master/dist/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
  // Este evendo é acionado após o carregamento da página
  $(window).on('load', function(){
    //Após a leitura da pagina o evento fadeOut do loader é acionado, esta com delay para ser perceptivo em ambiente fora do servidor.
    jQuery("#loader").delay(2000).fadeOut("slow");
  });
</script>
</body>
</html>

Goal

I would like my PHP content to be displayed on the screen only after loading 100% because this PHP snippet is a select in the database that takes a long time to display giving aspect that the page is not responding.

Problem

The Loader is always displayed next to the PHP content, so it is only displayed after the request is finished. I tried several ways before posting on the forum, if someone can show a method that works will be of great help!

The Loader should disappear only when the PHP code is inserted into the HTML?

– Victor Carnaval

2019/08/05 at 17:04
I believe you should use Ajax to load only the content of div #content.

– Sam

2019/08/05 at 17:04
Exactly @Victorcarnaval

– buddy-stack

2019/08/05 at 17:04
How can I do this @Sam? Could you give me an example please!

– buddy-stack

2019/08/05 at 17:05

1 answer

Browser other questions tagged php javascript jquery

You are not signed in. Login or sign up in order to post.

by Sam • **79,597** points · Answer 1 · 2019-08-05T17:12:12+00:00

Use Ajax to load div content #content. Because it is asynchronous, the Oader will be visible until the content is loaded into the div.

Do the following:

Hide the div #content in your CSS:

#content{
   display: none;
}

Create a file .php which will return the HTML that will be inserted in the div. This file .php will be requested by Ajax. The same PHP code you put in the div #content will be what you will put in the file .php.

Then you call Ajax when the page loads:

<script>
$(function(){

   $("#content").load("pagina.php", function(){

      $("#content").show(); // mostra a div
      $("#loader").fadeOut("slow");

   })

});
</script>

After Ajax returns the data to the div, the Loader will be hidden in the Ajax callback.

To pagina.php is where the data will come from. Then you put the name you want (ex., content.php etc...). On this page will be processed the PHP code that will be returned.

Maybe we don’t even need to hide the div #content, since she’ll be initially empty. If you don’t want to hide, you can skip the CSS I put above and delete the line $("#content").show();.