CODEWITHSUNDEEP
javascriptphphtmlcss
user3807035
user3807035

Reputation: 21

How can I make a JavaScript loading image show until a page finishes loading?

How can I make a JavaScript loading image show until a page finishes loading?

I am working on online antivirus scanner. I want to make JavaScript show a loading image until the file been uploaded and the API has finished scanning. I have two files: the index.html only has an HTML upload form, and upload.php where I do file_get_contents (it takes about 10 seconds) and receives data from an API.

Upvotes: 2

Views: 292

Answers (3)

Marvil Joy
Marvil Joy

Reputation: 662

<style type="text/css">
#loading
{
 position:fixed;
 top:-50%;
 left:-50%;
 width:200%;
 height:200%;
 background:#fff;
 z-index:100;
 overflow:hidden
}
 #loading img
{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto}
</style>

use the following div just after opeing of body tag

<div id="loading"><img src="img/ajax-loader.gif"></div>

Then, @ the script ready function,

$(document).ready(function() {

   $("#loading").fadeOut();

})

Upvotes: 0

bambang
bambang

Reputation: 27

maybe you should try to use of ajax load, so basically, you hidden all the content of your html, and then if the pages finished loaded, you hidden the 'loading images', and then unhide the html

Upvotes: 0

Valentin Mercier
Valentin Mercier

Reputation: 5326

With PHP, the fastest way to do it is:

<?php
ob_start();
?>
<img src="load.gif" /> 
<?php
ob_flush();
flush();

file_get_contents(YOUR_FILE);
ob_end_flush();
?>

Upvotes: 0

Related Questions