У меня есть раздел на нашем сайте, который загружается довольно медленно, так как он делает некоторые интенсивные звонки.
Любая идея, как я могу divсказать что-то похожее на «загрузку», чтобы показать, пока страница готовится, а затем исчезает, когда все готово?
Ответы:
Я нуждался в этом, и после некоторого исследования я придумал это ( нужно 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>
$(window).load(function() {
$('#loading').hide();
});
</script>Наконец, отрегулируйте положение загрузочного изображения и background-colourзагрузочного div с классом стиля.
Это все, должно работать просто отлично. Но, конечно, вы должны иметь ajax-loader.gifгде-то. Халява здесь . (Щелкните правой кнопкой мыши> Сохранить изображение как ...)
$('#loading').hide();на каждой странице загрузки.
Этот скрипт добавляет div, который покрывает все окно при загрузке страницы. Он покажет загрузочный счетчик только для CSS автоматически. Он будет ждать, пока окно (не документ) завершит загрузку, затем будет ждать дополнительные несколько секунд.
Код загрузчика 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 window 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's 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>$(window).on("load", handler)запускается, когда все объекты DOM заканчивают загрузку, включая изображения, сценарии, даже iframes. Если вы хотите дождаться загрузки определенного изображения, используйте$('#imageId').on("load", handler)
$( "#loadingDiv" ).remove();на $( "#loadingDiv" ).hide();и добавить $( "#loadingDiv" ).show();раньше setTimeout(removeLoader, 2000);. Я удалил div, чтобы сделать страницу более легкой, но это исправление делает ее многоразовой.
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> Изображение загрузки страницы с простейшим эффектом затухания, созданным в JS:
У меня есть еще одно простое решение, которое отлично сработало для меня.
Прежде всего, создайте 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, который дает 
результат, и как только страница будет готова над окнами при загрузке, сработает функция, которая скрывает экран обложки после того, как экран полностью загружен.
По умолчанию содержимое имеет, display:noneа затем имеет обработчик события, который устанавливает его display:blockили подобное после его полной загрузки. Затем укажите div, для которого установлено значение display:block«Загрузка», и установите для него display:noneтот же обработчик событий, что и раньше.
Ну, это во многом зависит от того, как вы загружаете элементы, необходимые для «интенсивного вызова», я изначально думал, что вы выполняете эти загрузки через 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();
});beforeSendи successк каждому вызову ajax.
Мой блог будет работать на 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">Создайте <div>элемент, содержащий ваше сообщение о загрузке, дайте <div>идентификатор, а затем, когда ваш контент завершит загрузку, скройте <div>:
$("#myElement").css("display", "none");... или простым JavaScript:
document.getElementById("myElement").style.display = "none";$("#myElement").hide()проще на глазах?
Вот jQuery, который я в конечном итоге использовал, который контролирует все запуск / остановку 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>На основе ответа @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();
});hide()элемента, чем для remove()него, так что вы можете использовать его снова.
Это будет синхронизировано с вызовом API. При запуске вызова API отображается загрузчик. Когда вызов API успешен, загрузчик удаляется. Это может использоваться для загрузки страницы или во время вызова API.
$.ajax({
type: 'GET',
url: url,
async: true,
dataType: 'json',
beforeSend: function (xhr) {
$( "<div class='loader' id='searching-loader'></div>").appendTo("#table-playlist-section");
$("html, body").animate( { scrollTop: $(document).height() }, 100);
},
success: function (jsonOptions) {
$('#searching-loader').remove();
.
.
}
});CSS
.loader {
border: 2px solid #f3f3f3;
border-radius: 50%;
border-top: 2px solid #3498db;
width: 30px;
height: 30px;
margin: auto;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
margin-top: 35px;
margin-bottom: -35px;
}
/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}для друпал в твоей теме файл custom_theme.theme
function custom_theme_preprocess_html(&$variables) {
$variables['preloader'] = 1;
}В файле html.html.twig после пропуска основной ссылки содержимого в теле
{% if preloader %}
<div id="test-preloader" >
<div id="preloader-inner" class="cssload-container">
<div class="wait-text">{{ 'Please wait...'|t }} </div>
<div class="cssload-item cssload-moon"></div>
</div>
</div>
{% endif %} в файле CSS
#test-preloader {
position: fixed;
background: white;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
}
.cssload-container .wait-text {
text-align: center;
padding-bottom: 15px;
color: #000;
}
.cssload-container .cssload-item {
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 131px;
height: 131px;
background-color: #fff;
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
-o-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
-ms-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
-webkit-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
-moz-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
}
.cssload-container .cssload-moon {
border-bottom: 26px solid #008AFA;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
animation: spin 1.45s ease infinite;
-o-animation: spin 1.45s ease infinite;
-ms-animation: spin 1.45s ease infinite;
-webkit-animation: spin 1.45s ease infinite;
-moz-animation: spin 1.45s ease infinite;
}