У меня есть раздел на нашем веб-сайте, который загружается довольно медленно, когда он совершает несколько интенсивных вызовов.
Любая идея, как я могу получить div, чтобы сказать что-то похожее на "загрузку", чтобы показать, пока страница подготавливается, а затем исчезает, когда все готово?
Как показать загрузку страницы, пока страница не закончит загрузку
Ответ 1
Мне нужно это, и после некоторых исследований в Интернете я придумал это (нужно jQuery):
Сначала сразу после тега body добавьте это:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
Затем добавьте класс стиля для div и изображения в ваш CSS:
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
И, наконец, добавьте этот javascript на свою страницу (желательно в конце вашей страницы, прежде чем закрыть тег <body>, конечно):
<script language="javascript" type="text/javascript">
$(window).load(function() {
$('#loading').hide();
});
</script>
Затем отрегулируйте положение загружаемого изображения и цвет фона загрузочного div с помощью класса стиля справки.
Это он, работает отлично. Но, конечно, вы должны иметь ajax-loader.gif где-то.
Ответ 2
window.onload = function(){ document.getElementById("loading").style.display = "none" }#loading {width: 100%;height: 100%;top: 0px;left: 0px;position: fixed;display: block; z-index: 99}
#loading-image {position: absolute;top: 40%;left: 45%;z-index: 100} <div id="loading">
<img id="loading-image" src="img/loading.gif" alt="Loading..." />
</div> Ответ 3
Этот скрипт добавляет div, который покрывает весь экран при загрузке страницы. Он покажет загрузочный счетчик только для CSS автоматически. Он будет ждать, пока окно (не документ) завершит загрузку, затем будет ждать дополнительные несколько секунд.
- Работает с jQuery 3 (в нем есть новое событие загрузки окна)
- Изображение не нужно, но его легко добавить
- Измените задержку для большего количества брендинга или инструкций
- Единственная зависимость - это jQUery.
Код загрузчика CSS от https://projects.lukehaas.me/css-loaders
$('body').append('<div style="" id="loadingDiv"><div class="loader">Loading...</div></div>');
$(window).on('load', function(){
setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
});
function removeLoader(){
$( "#loadingDiv" ).fadeOut(500, function() {
// fadeOut complete. Remove the loading div
$( "#loadingDiv" ).remove(); //makes page more lightweight
});
} .loader,
.loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
.loader {
margin: 60px auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(255, 255, 255, 0.2);
border-right: 1.1em solid rgba(255, 255, 255, 0.2);
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
border-left: 1.1em solid #ffffff;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#loadingDiv {
position:absolute;;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
}This script will add a div that covers the entire screen as the page loads. It will show a CSS-only loading spinner automatically. It will wait until the window (not the document) finishes loading.
<ul>
<li>Works with jQuery 3, which has a new window load event</li>
<li>No image needed but it easy to add one</li>
<li>Change the delay for branding or instructions</li>
<li>Only dependency is jQuery.</li>
</ul>
Place the script below at the bottom of the body.
CSS loader code from https://projects.lukehaas.me/css-loaders
<!-- Place the script below at the bottom of the body -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Ответ 4
По умолчанию содержимое display:none, а затем обработчик события, который устанавливает его на display:block или аналогичный после его полной загрузки. Затем добавьте div, установленный в display:block с "Загрузка" в нем, и установите его в display:none в том же обработчике событий, что и раньше.
Ответ 5
У меня есть еще одно простое решение, которое отлично сработало для меня.
Прежде всего, создайте CSS с именем класса Lockon, который является прозрачным наложением вместе с загрузкой GIF, как показано ниже
.LockOn {
display: block;
visibility: visible;
position: absolute;
z-index: 999;
top: 0px;
left: 0px;
width: 105%;
height: 105%;
background-color:white;
vertical-align:bottom;
padding-top: 20%;
filter: alpha(opacity=75);
opacity: 0.75;
font-size:large;
color:blue;
font-style:italic;
font-weight:400;
background-image: url("../Common/loadingGIF.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
Теперь нам нужно создать наш div с этим классом, который покрывает всю страницу как оверлей, когда страница загружается
<div id="coverScreen" class="LockOn">
</div>
Теперь нам нужно скрыть этот титульный экран всякий раз, когда страница готова, чтобы мы могли запретить пользователю нажимать/запускать любое событие, пока страница не будет готова
$(window).on('load', function () {
$("#coverScreen").hide();
});
Выше решение будет хорошо, когда страница загружается.
Теперь вопрос заключается в том, что после загрузки страницы каждый раз, когда мы нажимаем кнопку или событие, которое займет много времени, мы должны показать это в событии клика клиента, как показано ниже.
$("#ucNoteGrid_grdViewNotes_ctl01_btnPrint").click(function () {
$("#coverScreen").show();
});
Это означает, что когда мы нажимаем эту кнопку печати (что займет много времени, чтобы предоставить отчет), он покажет наш экран обложки с GIF, который дает результат 
, и как только страница будет готова над окнами при загрузке, сработает функция и которая скрывает экран крышки, как только экран полностью загружен.
Ответ 6
Ну, это во многом зависит от того, как вы загружаете элементы, необходимые в "интенсивном вызове", моя первоначальная мысль заключается в том, что вы делаете эти нагрузки через ajax. Если это так, то вы можете использовать опцию "beforeSend" и сделать такой вызов ajax следующим образом:
$.ajax({
type: 'GET',
url: "some.php",
data: "name=John&location=Boston",
beforeSend: function(xhr){ <---- use this option here
$('.select_element_you_want_to_load_into').html('Loading...');
},
success: function(msg){
$('.select_element_you_want_to_load_into').html(msg);
}
});
ИЗМЕНИТЬ
Я вижу, в этом случае использование одного из опций 'display:block'/'display:none' выше в сочетании с $(document).ready(...) из jQuery - это, вероятно, путь. Функция $(document).ready() ожидает, что вся структура документа будет загружена перед выполнением (но она не дожидается загрузки всех носителей). Вы сделали бы что-то вроде этого:
$(document).ready( function() {
$('table#with_slow_data').show();
$('div#loading image or text').hide();
});
Ответ 7
Мой блог будет работать на 100 процентов.
function showLoader()
{
$(".loader").fadeIn("slow");
}
function hideLoader()
{
$(".loader").fadeOut("slow");
}.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('pageLoader2.gif') 50% 50% no-repeat rgb(249,249,249);
opacity: .8;
}<div class="loader">Ответ 8
Создайте элемент <div>, содержащий ваше загрузочное сообщение, введите <div> идентификатор, а затем, когда ваше содержимое закончит загрузку, скройте <div>:
$("#myElement").css("display", "none");
... или в обычном JavaScript:
document.getElementById("myElement").style.display = "none";
Ответ 9
Здесь jQuery я использовал, который контролирует все start/stop ajax, поэтому вам не нужно добавлять его к каждому вызову ajax:
$(document).ajaxStart(function(){
$("#loading").removeClass('hide');
}).ajaxStop(function(){
$("#loading").addClass('hide');
});
CSS для загрузки контейнера и содержимого (в основном из ответа mehyaa), а также класса hide:
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-content {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
z-index: 100;
}
.hide{
display: none;
}
HTML:
<div id="loading" class="hide">
<div id="loading-content">
Loading...
</div>
</div>
Ответ 10
На основании ответа @mehyaa, но гораздо короче:
HTML (сразу после <body>):
<img id = "loading" src = "loading.gif" alt = "Loading indicator">
CSS
#loading {
position: absolute;
top: 50%;
left: 50%;
width: 32px;
height: 32px;
/* 1/2 of the height and width of the actual gif */
margin: -16px 0 0 -16px;
z-index: 100;
}
Javascript (jQuery, поскольку я уже использую его):
$(window).load(function() {
$('#loading').remove();
});
Ответ 11
Прочитайте следующую статью: Это поможет добавить загрузочный GIF на вашу страницу при загрузке. https://smallenvelop.com/display-loading-icon-page-loads-completely/
Ответ 12
Window.unload работает хорошо. Просто разместите это на своих страницах. (Пример использования jQuery):
<script type="text/javascript">
$(window).unload(function() {
var html = "<img src='html/loading.gif' />";
$('#loading').append(html);
});
</script>
<div id="loading" />