Показывать и скрывать gif-изображение поверх некоторого содержимого в jquery ajax

#jquery #ajax

Вопрос:

Я пытаюсь отобразить gif-изображение предварительной загрузки поверх некоторого содержимого, я пытаюсь с помощью приведенных ниже кодов,

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

но не могу правильно понять, как я могу показать gif-изображение над определенным содержимым и скрыть через некоторый интервал

Ответ №1:

Почему вы не используете функцию before and complete в своем вызове ajax? Используйте стиль, подобный опубликованному @The_Death_Raw

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

Ответ №2:

Вы можете использовать div в абсолютной позиции, а также использовать setTimeout, чтобы скрыть загрузчик по истечении указанного времени.

 $('.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>

1. оно отображается, но я использую предварительный загрузчик в определенной части, например, metabox небольшой div, можете ли вы мне в этом помочь?

2. Может быть, вы можете попробовать это: jQuery(«#my_post_optionsd»).html(«<img src=’ajax-spinner-preloader.gif ‘ class=’loader’>»).setTimeout(hideLoader, 1000); функция hideLoader () { $(«.loader»).fadeOut(300); }

3. отображение ошибки в консоли, неперехваченная ошибка типа: jQuery(…).html(…).setTimeout не является функцией