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

Question

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

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

Answer 1

Это имеет много решений, но простой заключается в следующем:

1- Создание наложения DIV с вашим загрузчиком вещами и препендом к телу;
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> 

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

Answer 2

Заканчивать 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(); 

Answer 3

HTML

Добавьте следующий HTML-код после открытия тега. Этот loader 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> 

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