Geek Answers Handbook

Image of progress during page load

Before continuing:

  • I know this has been done before.
  • I searched for SO for this before deciding on this ...

It is said that I noticed that in some browsers that have settings to clear the cache every time I visit the page, some parts of my page are delayed. I would like to have a function that displays some animated image until the page is 100% loaded.

I would like to put it in my header, including the file once, and every time the page loads, it starts. I think I need this to be implemented in AJAX. I would like this feature to be autonomous, i.e. Not tied to any other functions. Should I use jQuery? Since jQuery itself requires loading an external file, should I implement it as a simple JS function?

Any feedback would be highly appreciated. Examples would be priceless.

:)

EDIT:

I found a plugin that does exactly what I need.

+1
source share
4 answers

With jquery you can do something like this

HTML

<div id="loader"></div> $(window).load(function () { $("#loader").fadeOut(); });

You can enable the div with the loader (if it is fixed or absolute, as you wish), and then using $ (window) .load (callback); You may find that the whole page has finished loading so that you can hide the bootloader.

Or with pure JS you can do the same,

 window.onload = function() { document.getElementById('loader').style.display='none'; }
+2
source

You can use the onLoad attribute. Do something similar to:

 <body onLoad='showLoadingDiv()'>

and make the showLoadingDiv function display a full-sized white div with a loading icon.

Another (possibly preferred) option is to have

 <div style='background:white; width:100%; height:100%'>LOADING</div>

and hide it as soon as the page is fully loaded, i.e. under jQuery $(function() { });

+1
source

This page contains some AJAX progress images to use.

+1
source 
 <html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script> <script type="text/javascript"> //window.onload will wait for images window.onload = function() { //find element with id='progress' and hide it $('progress').hide(); } </script> </head> <body> <img id="progress" src="https://forums.embarcadero.com/servlet/JiveServlet/download/2-21014-135909-1751/progress2.gif" style="display:show;"> <h1="">This is a solar eclipse</h1> <img src="http://www.zam.fme.vutbr.cz/~druck/eclipse/Ecl2008m/Tse2008_1250_mo1/Hr/Tse2008_1250_mo1.png" width="50%" style="display:show;"> <p>Pretty and large enough to have to wait for</p> </body> </html>

I hope this helps

+1
source

More articles:


All Articles