Добавление загрузчика страниц с помощью jquery

Мне нужна небольшая помощь. Я не знаю с чего начать. Мне нужно добавить загрузчик страниц на мой сайт. Сначала я отправляю форму, затем она использует SimpleXML для вызова внешнего листа xml с expedia. Загрузка занимает минуту, поэтому я хотел бы добавить загрузчик изображений на эту страницу. Но как мне это сделать? Я посмотрел на Google и не смог найти полезную информацию.

Мне нужно, чтобы показать загрузчик, пока не загрузится полная страница.

Источник

3 ответа

Решение

Это имеет много решений, но простое:

1- Создайте оверлей DIV с вашим загрузчиком и добавьте BODY;
2- Добавить прослушиватель событий для window.load или же document.ready событие, которое скрывает этот DIV.

// On the first line inside BODY tag
<script type="text/javascript">
    jQuery("body").prepend('<div id="preloader">Loading...</div>');
    jQuery(document).ready(function() {
        jQuery("#preloader").remove();
    });
</script>

(исправлены опечатки кода)

Источник

Проверьте spin.js http://fgnass.github.com/spin.js/

var opts = {
lines: 13, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
// Even more options available.... 
};
var target = document.getElementById('loading');
var spinner = new Spinner(opts).spin(target);

И как только ваша форма заполнена:

$("#loading").data('spinner').stop();
Источник

HTML

Добавьте следующий HTML после открывающего тега. Этот загрузочный div покажет загрузочное изображение при загрузке страницы.

<div class="pageloader"></div>

CSS

.pageloader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('images/yourLoaderImage.gif') 50% 50% no-repeat rgb(249,249,249);
opacity: .8;

}

JavaScript

Сначала включите библиотеку jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Теперь добавьте следующую строку кода, чтобы скрыть загрузочное изображение, пока страница полностью загружается.

<script type="text/javascript">
$(window).load(function() {
    $(".pageloader").fadeOut("slow");
});
</script>

Это полностью работает для меня.

Источник
Другие вопросы по тегам