How i can increase loading time of GIF image?

Question

Before AJAX method I add a GIF image but duration of loading time is very short. How can I set time of loading duration and after that AJAX response will show?

            $('.signup p').html('<img src="img/loading.gif" width="40px" height="40px" alt="loading_effect" />');

            $.ajax({
                 url : 'signup_action.php',
                 method : 'post',
                 data : {name,email,password1,dob,gender},
                success : function(response){
                    $('.signup p').html(response);
                }
            });

You can use `.delay()` in jQuery to do that as : https://api.jquery.com/delay/ — Umair Shah, May 22 '16 at 13:47

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

0

Here is exactly how you can delay it like this way as :

BY USING .delay() :

 $('.signup p').delay(800).html('<img src="img/loading.gif" width="40px" height="40px" alt="loading_effect" />');

Note : You need to enter the seconds in miliseconds like this way as i.e for 1 Second you will need 1000.

Reference URL For .delay() :

https://api.jquery.com/delay/

OR

Ofcourse another way to do this is as :

$(document).ajaxStart(function() {
       $('.signup p').show();
}).ajaxStop(function() {
    $('.signup p').hide();
});

Reference Links :

.ajaxStart() : https://api.jquery.com/ajaxStart/

.ajaxStop() : https://api.jquery.com/ajaxStop/

edited Jun 20 '20 at 09:12

Community

1
1

answered May 22 '16 at 13:49

Umair Shah

2,305
2
25
50

i use this code but loading time is same as before..... $('.signup p').delay(1000).html(''); – nur alam May 22 '16 at 13:58
Enter more than 1000 instead enter 5000 or more..! – Umair Shah May 22 '16 at 14:01

score 0 · Answer 2 · answered May 22 '16 at 13:52

0

You can do it. Jquery has specific functions to know when ajax starts and when ajax stops. If you want to display each time your gif and hide it when ajax stop : You can hide the gif (using display:'none') and show it when you load ajax

$(document).ajaxStart(function() {
       $('.signup p').show();
}).ajaxStop(function() {
    $('.signup p').hide();
});

If you know how many times, you want to show and then hide it, use https://api.jquery.com/delay/

answered May 22 '16 at 13:52

jy95

773
13
36

should i use this code before ajax method of my code – nur alam May 22 '16 at 14:04
Yes. If you use this code, you should add it at the begin in $(function() { }); . – jy95 May 22 '16 at 14:05
i do this .hide(2000).loading is running but response text shown on loading time.i want when loading is stop then response text will show – nur alam May 22 '16 at 14:21
hide with a timeout is not a good idea when you want to display animation during loading (ajax requests can take seconds or take seconds) – jy95 May 22 '16 at 14:37

How i can increase loading time of GIF image?

2 Answers2