loading when page make an operation

Hi EE
i have a question:
Can I add a loader (like gif animator , like ajax) when i lanch an operation into may page?
Example :
I have a php page that send some request and print video the result, some times, the result return after 50/60 seconds, so i would add a loader when my page attend.
I dont know how i implement this.
Can you help me?
I use in my project php - mysql and use jQuesry framework.

Regards
Denis
denny3dAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

JagarmTechnical Support AnalystCommented:
Please check the following page: http://www.dynamicdrive.com/dynamicindex4/preloadimage.htm

Let me know if it didin't help.
0
BrianMMCommented:
I do this when uploading files... but same principle for any form submit which will take some time to process...
<script type="text/javascript">
 
 
        $(document).ready(function(){
                var validator = $("#importForm").validate({ 
                        // specifying a submitHandler prevents the default submit, good for the demo 
                submitHandler: function() { 
                        $('#importit').hide();
                        $('#importing').show(); // show animation
                        $("#importForm").submit();
                } 
                });
        });
 
</script>               
<form action="index.php" method="post" enctype="multipart/form-data" name="importForm" id="importForm">
<div id="importit">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="1">
        <tr valign="top">
                <td class="label"><label id="lufile" for="ufile">Import File</label></td>
                <td class="field">
                        <input name="ufile" type="file" id="ufile" size="50"  class="required" value="" accept="csv"/><br>
                        <b>NOTE:</b> Maximum filesize is <b>approximately $php_upload_max_filesize</b>.<br>
                </td>
                <td> </td>
        </tr>
        <tr>
                <td class="label"><label id="limportsubmit" for="importsubmit"></label></td>
                <td class="field" colspan="2">
                        <input id="importsubmit" name="importsubmit" type="submit" value="Import Hubs">
                </td>
        </tr>
</table>
<div style="clear: both;"> </div>
</div>
</div>
</form>

Open in new window

0
denny3dAuthor Commented:
no , it's not ok
i lanch a link and not open an image
0
Exploring ASP.NET Core: Fundamentals

Learn to build web apps and services, IoT apps, and mobile backends by covering the fundamentals of ASP.NET Core and  exploring the core foundations for app libraries.

denny3dAuthor Commented:
@BrianMM

where div #importing ?
0
BrianMMCommented:
:)
<script type="text/javascript">
 
 
        $(document).ready(function(){
                var validator = $("#importForm").validate({ 
                        // specifying a submitHandler prevents the default submit, good for the demo 
                submitHandler: function() { 
                        $('#importit').hide();
                        $('#importing').show(); // show animation
                        $("#importForm").submit();
                } 
                });
        });
 
</script>               
<form action="index.php" method="post" enctype="multipart/form-data" name="importForm" id="importForm">
<div id="importit">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="1">
        <tr valign="top">
                <td class="label"><label id="lufile" for="ufile">Import File</label></td>
                <td class="field">
                        <input name="ufile" type="file" id="ufile" size="50"  class="required" value="" accept="csv"/><br>
                        <b>NOTE:</b> Maximum filesize is <b>approximately $php_upload_max_filesize</b>.<br>
                </td>
                <td> </td>
        </tr>
        <tr>
                <td class="label"><label id="limportsubmit" for="importsubmit"></label></td>
                <td class="field" colspan="2">
                        <input id="importsubmit" name="importsubmit" type="submit" value="Import Hubs">
                </td>
        </tr>
</table>
<div style="clear: both;"> </div>
</div>
</div>
</form>
<div style="display: none;" id="importing">
<b>Please be patient, importing into ACSLite...</b>
<br><br><img src="./media/images/ajax-loader.gif" alt="Loading...">
</div>

Open in new window

0
denny3dAuthor Commented:
hello EE
i have an example
cam you see this link and try to serch anythink
you can saw a loading in the middle of the page, when the page load.
can i make this effects?

this is the link

www.bancodinapoli.it

regards
0
denny3dAuthor Commented:
Hello EE
nobody help me?


0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Scripting Languages

From novice to tech pro — start learning today.