View content only after full page load

Asked

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!

php javascript jquery

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

  • I believe you should use Ajax to load only the content of div #content.

  • Exactly @Victorcarnaval

  • How can I do this @Sam? Could you give me an example please!

1 answer

3


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();.

  • Excellent @Sam response, indicates some reading material on AJAX?

  • There are several on Google. Search by "javascript ajax" that the first search results will have good materials to read.

  • beauty, thanks for the strength!

Browser other questions tagged php javascript jquery

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