Question posted in
You can find the official documentation here.

Show and hide gif image over some contents in jquery ajax

I am trying to show preloader gif image over some contents, I am trying with the below codes,

jQuery("#my_post_optionsd").html("<img src='ajax-spinner-preloader.gif'>").delay(1000).fadeOut(300);

but can’t get properly how can I show gif image over certain contents and hide after some interval

Tags:

2

Answers


  1. 0

    You can use a div in absolute position and also use setTimeout to hide the loader after specified time.

    $('.loader').show();

// hide loader after 5 secondes
setTimeout(function() { 
    $('.loader').hide();
}, 5000);
    body {
 overflow:hidden;
}

.loader {
    background: url(https://i.stack.imgur.com/sEKwt.gif) no-repeat center center rgba(0,0,0,0.25);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loader" style="display:none"></div>
<p class="content">Vestibulum pellentesque est interdum magna dapibus tempus. Donec sagittis nibh id consectetur aliquam. Cras eleifend, massa ut fermentum ullamcorper, tellus velit consectetur lorem, sit amet porttitor dui quam ac neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed facilisis vehicula eros, vitae porta erat. Maecenas nec arcu eu lorem lobortis interdum eget non quam. Nulla non elit laoreet, sollicitudin ex id, aliquet augue. Mauris suscipit augue et felis scelerisque convallis id eget quam. Phasellus ac placerat orci. Sed vulputate venenatis nisl, nec accumsan nisi dignissim vitae. Nunc imperdiet mi vel semper volutpat. Phasellus a ultrices ex. Fusce orci mauris, tempus sit amet fringilla ac, malesuada sed turpis. Ut id venenatis lectus.</p>
    Login or Signup to reply.
  2. 0

    Wy don’t you use the before and complete function in your ajax call?
    Use the styling like @The_Death_Raw posted

    $.ajax({
  url: '',
  method: '',
  ....
  before: function() {
    $('.loader').show();
  },
  success: function(response) {
 // Do something with the response
},
complete: function() {
$('.loader').hide();
}
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search