在jquery ajax中显示和隐藏某些内容上的gif图像

Question

我正在尝试显示预加载器gif图像的一些内容，我正在尝试与以下代码，

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

但无法正确获取如何在某些内容上显示gif图像并在某些间隔后隐藏

Answer 1

在ajax调用中不使用before和complete函数吗？使用类似@the_death_raw post的样式

$.ajax({
  url: '',
  method: '',
  ....
  before: function() {
    $('.loader').show();
  },
  success: function(response) {
 // Do something with the response
},
complete: function() {
$('.loader').hide();
}
})

Answer 2

您可以在绝对位置使用div，也可以在指定时间后使用setTimeout隐藏加载程序。

null

js lang-js prettyprint-override">$('.loader').show();

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

.loader {
    background: url(https://i.stack.imgur.com/sEKwt.gif) no-repeat center center;
    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>