Login

11-13-2010, 03:27 PM

[eluser]Ramania[/eluser]
The title sums it all, the techinque used when an Ajax call is made, an automated GIF that represents "Loading..." is placed in the div where the Ajax data response would be placed ..

my idea was simple, to echo out a div with the image tag with it's own style with no javascript or anything in the center of the screen, css position set to absolute .. then once the document is ready, a very simple javascript call would hide the loading image ..

anyone else ever though of doing something similar to their CI project? the loading image would be around 1kb~ so it won't be a problem..

the only problem i have with this method is the absence of JS on the client side .. but again my application is already filled with js code that won't allow the site to function correctly without it ...

i am thinking loudly here .. i am not YouTube or Google or a big company with "Vital information" to server everyone on the planet, so as long as my site is organized and works across all the major -updated- broswers i'm ok!

looking forward for any ideas .. it would be a nice touch ..

11-13-2010, 06:56 PM

[eluser]dudeami0[/eluser]
Well you have the option of placing the image, then replacing/removing it when the ajax call is finished. JS would get the job done to (Place the image onload, then remove after the ajax call is done). Either way it works.

As I don't like pure JS, I would suggest learning something like jQuery (It make working with JS alot easier).

11-14-2010, 01:41 AM

[eluser]Ramania[/eluser]
i've implemented what i was talking about yesterday

http://www.alraqamya.com

Big Grin

11-14-2010, 02:09 AM

[eluser]Bart v B[/eluser]
Can you share some code with us?

11-14-2010, 02:59 AM

[eluser]Ramania[/eluser]
Sure, here is what i've done, i kept it very simple :

i put this div before anything in my header view, the view that i load each time in every page using my template function :

Code:
<div id="indexLoader" style="width:100%;height:100%;position: absolute; background: white; opacity:0.8;">

    <center>

        <br /><br />

        <img src="&lt;?realpath(dirname(__FILE__))?&gt;/system/loading.gif">

        <br /><br />

        Please wait the site is Loading ...

    </center>

</div>

and in my js header (it's a subview that i only put js and css in, in case i wanted to bypass the graphical header :

Code:
$(document).ready(function() {

    $('#indexLoader').fadeOut('fast');

    //rest of the code goes here so the loader fadeout is the first function executed

i found it even beneficial after i wrote it, because it makes sure the page was fully loaded, so if a user is "clicky" this 100% height, 100% width div would prevent them from clicking before the page is loaded.

i hope this would be useful to someone Smile

.

ps : you can use

Code:
$this->config->system_url();

since the config file is already loaded in this stage, i forgot to modify it since i was using this div in the main index file which i don't recommend modifying unless you know what you are doing, i removed the div from there because it was appearing even in my error pages and AMFPHP controller...etc.

ps2:
this is where i got the loading gif image

http://ajaxload.info/

11-14-2010, 03:07 AM

[eluser]dudeami0[/eluser]
The only flaw I see with it is that the white-box is suddenly cut off at the end of the window height. Try wrapping the body in a div tag to see if it extends all the way. Other than that it looks great Smile

11-14-2010, 03:12 AM

[eluser]Ramania[/eluser]
[quote author="dudeami0" date="1289747275"]The only flaw I see with it is that the white-box is suddenly cut off at the end of the window height. Try wrapping the body in a div tag to see if it extends all the way. Other than that it looks great Smile

[/quote]

Thanks for noting that out, as for wrapping the body in a div tag i think this might be a little bit of a twist to the standards -which i've already twisted so much lol- but yeah i'll fiddle around with it to make it smoother .. Big Grin

11-14-2010, 03:18 AM

[eluser]dudeami0[/eluser]
What I mean is something like

Code:
&lt;body&gt;

   <div>

      &lt;!-- Contents here --&gt;

   </div>

&lt;/body&gt;

This way the 100% applies to a div element that goes down the whole page, not the body element which only represents the height of the viewing area.

11-14-2010, 03:26 AM

[eluser]Ramania[/eluser]
[quote author="dudeami0" date="1289747895"]What I mean is something like

Code:
&lt;body&gt;

   <div>

      &lt;!-- Contents here --&gt;

   </div>

&lt;/body&gt;

This way the 100% applies to a div element that goes down the whole page, not the body element which only represents the height of the viewing area.[/quote]

ohh i apologize i misunderstood you, i thought you meant <div><body></body></div> ... by the way, your http://gfxtub.com/ is awesome, it's fast and practical, big up on that Smile

11-14-2010, 03:35 AM

[eluser]dudeami0[/eluser]
Thanks for the complement, its what I aimed for when making it Smile