На нашому веб-сайті є розділ, який завантажується досить повільно, оскільки він робить інтенсивні дзвінки.
Будь-яка ідея, як я можу змусити divсказати щось подібне до "завантаження" для показу, поки сторінка готується до себе, а потім зникає, коли все буде готово?
Відповіді:
Мені це було потрібно, і після деяких досліджень я придумав це ( потрібний jQuery ):
По-перше, відразу після <body>тегу додайте це:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
Потім додайте клас стилю для div та image у свій 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розміщення завантажувального класу за допомогою класу стилів.
Це воно, повинно працювати просто чудово. Але звичайно треба 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 закінчуються завантаженням, включаючи зображення, сценарії, навіть рамки кадрів . Якщо ви хочете дочекатися завантаження конкретного зображення, використовуйте$('#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);
}
});
EDIT
Я бачу, що в цьому випадку використання одного з '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); }
}для drupal у вашій темі файлу 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;
}